vue中利用clipboard.js实现点击按钮复制文字到剪贴板

原文链接：
Vue中配合clipboard.js实现点击按钮复制内容到剪切板-luozz

下载:npm install clipboard --save
引入（main.js）:
import clipboard from 'clipboard'; //注册到vue原型上 Vue.prototype.clipboard = clipboard;
template:

<input type="text" id="success_form_input" readonly="readonly" v-model="link"/>
/*button上的这个ref需要命名一个，名字自己取，下面会讲解为什么*/
<button ref="copy" data-clipboard-action="copy" data-clipboard-target="#success_form_input" @click="copyLink">复制</button>

Events:

data() {
  return {
     copyBtn: null //存储初始化复制按钮事件
  }
},
mounted() {
/*这里使用了刚开始注册到vue原型上的clipboard(使用注册到vue原型的插件的方法就是：this + 注册时命名名字)
*这里需要用到刚才给button命名的ref的名字，因为这是vue提供的获取DOM的方法，虽然可以通过引入jQuery来获取，但是不推荐这样做，具体原因可以看官方文档和网上论坛搜索
*这里是在挂载到DOM节点时将button按钮传入clipboard并存储起来，具体原因下面会有详述
*/
  this.copyBtn = new this.clipboard(this.$refs.copy);
},
methods: {
  copyLink() {
  /*这是点击按钮触发的点击事件，关于clipboard的使用就不再赘述了，上面介绍时已经讲述过，并且使用方法在官方文档上有*/
    let _this = this;
    let clipboard = _this.copyBtn;
    clipboard.on('success', function() {
        _this.$message({ /*这是使用了element-UI的信息弹框*/
            message: '复制成功！',
            type: 'success'
        });
    });
    clipboard.on('error', function() {
        _this.$message({
            message: '复制失败，请手动选择复制！',
            type: 'error'
        });
    });
  }
}

1、对Events的写法解惑及使用clipboard过程中的注意事项：

• 为什么要在mounted周期中把按钮先存储起来？

答：经过亲自测试，若在点击事件中再初始话，即把mounted中的内容放到copyLink函数中，那么第一次点击会无效，第二次及以后便能生效，这样肯定是不符合要求的，因此我想了这么一个办法来解决这么一个问题，当然不单单不是mounted周期，放在created和beforeMounted周期应该也是行的，虽然没有亲自测试，但是因为这两个周期已经能获取DOM了，应该是可以的。
2、使用过程中的注意事项

• 使用NPM安装完成之后记得在main.js中引入并注册到Vue原型上，名字可以自己取。
• 使用时通过this + 原型上命名名字来调用clipboard。
• 按钮通过ref的命名来取，就是this.$refs.xxx,不推荐使用jQuery来获取DOM。
• 关于clipboard复制按钮的要求请遵从官方文档要求，例如加上data-clipboard-action和data-clipboard-target等。