在 Vue 中使用粘贴板

在 Vue 中使用粘贴板

有时候用户需要使用复制的功能。所以，我们使用一个插件来完成这个功能。

• 首先需要安装 npm 包 vue-clipboard2。执行命令: npm i vue-clipboard2 --save
• 在 main.js中，配置如下代码

import Vue from 'vue'
import VueClipboard from 'vue-clipboard2'

Vue.use(VueClipboard)

• 使用： 直接调用点击函数即可

this.$copyText('this is copy text').then(function (e) {
 	// {1}
    alert('Copied')  
    console.log(e)
  }, function (e) {   
    // {2}
    alert('Can not copy') 
    console.log(e)
  })

注意： 在 {1} 和 {2} 处，如果要使用 this.xxx 的话，会发现控制台会报错，因为在普通函数内部，this 指向 undefined，所以如果要想使用 this 的话，可以换成箭头函数。

this.$copyText('this is copy text').then( (e) => {
    alert('Copied')  
    console.log(e)
  }, (e) => {   
    alert('Can not copy') 
    console.log(e)
  })

这样使用 this.xxx 是没有任何问题的。