vue 实现复制到粘贴板功能须要依赖到 clipboard.jsvue
一、 首先须要安装依赖 * 出现错误的话,能够试试 cnpmvue-cli
npm install --save vue-clipboard2
二、 安装成功以后就能够开始使用了npm
对于vue-cli 工具
import Vue from 'vue' import VueClipboard from 'vue-clipboard2'
Vue.use(VueClipboard)
对于常规的用法spa
<script src="vue.min.js"></script> <!-- 必须在vue.js以后放置这一行 --> <script src="vue-clipboard.min.js"></script>
三、 Dome的使用:code
<template> <div class="wxsmallcode-page publicCon"> <div class="copyBox"> sysAppId:<span>{{sysAppIds}}</span> <el-button class="ml10" type="text" size="medium" v-clipboard:copy="sysAppIds" v-clipboard:success="onCopy" v-clipboard:error="onError">点击复制</el-button> </div> </template>
<script> export default { data(){ return { sysAppIds: 'xxxxxxxxxxxsx' } }, methods: { // 复制成功 onCopy(e){ console.log(e); }, // 复制失败 onError(e){ alert("失败"); }, } } </script>
注:cnpm 为安装了淘宝镜像以后的命令工具blog