记录昨天浏览器点击按钮复制数据的功能:
查项目的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('复制失败');
}
}