说明

Vue项目里有个新需求，希望有些数据能够添加一键复制的功能，这样就能够方便用户操作了，而且复制出来的数据能够事先处理，满足实际的需要。

兼容性调研

本来看到了网上说的Clipboard API,但是吧，它不支持IE而且对安全性的要求较高，其write()方法需要某些权限，直接劈叉了。后来又看到了clipboard.js，成功满足了我的兼容性需求，那就用它！

在项目中使用

npm install clipboard -S  //项目中用于生产要锁定版本号

使用方法

官方文档在此。

import clipboard from 'clipboard'

......
methods:{
copy(){
   new clipboard('#copy',{
       text:function(){
           return '复制'
       }
   }).on('success',()=>{
      //复制成功干点什么
   }).on('error',()=>{
      //复制失败干点什么
   })
}
}

具体的用例参考在线代码

注意事项

在线代码里，每次执行回调后都会销毁创建的实例，因为每次创建实例后和添加一个监听器是差不多的，旧的实例还在务必会重复执行相关的回调导致消息弹窗重复显示。