VUE 复制数据到剪切板

记录昨天浏览器点击按钮复制数据的功能：

查项目的package.json 文件发现有 引入 vue-clipboard2，想着直接用就可以了。

"dependencies": {
    "vue-clipboard2": "^0.3.1",
}

如果项目中没有引入的话，需要先自己安装引入vue-clipboard2：

在项目的终端里执行：

npm install vue-clipboard2 --save


vue main.js 文件中引入:

import VueClipboard from 'vue-clipboard2'


Vue.use(VueClipboard);

引入完成后就可以直接使用啦，使用起来很方便：

<div class="copy-url" v-clipboard:copy="url" v-clipboard:success="onCopy" v-clipboard:error="onCopyError">
    <i class="icon-copy" style="width: 20px;height: 20px;margin-right: 4px;"></i>
    <span>复制URL</span>
</div>

其中，v-clipboard:copy="url"  的 'url' 是要复制到 剪切板的变量数据，在vue 的 data () {   url： 'http://www.xxxx==.png'} 申明即可；

v-clipboard:success="onCopySuccess" v-clipboard:error="onCopyError"  分别是执行成功 和 失败 后的回调函数:

methods: {    
    onCopySuccess () {
      // 执行的其它代码
      // ......
      this.$message.success('复制成功');
    },
    onCopyError () {
      // 执行的其它代码
      // ......
      this.$message.warning('复制失败');
    }
}