需求设定

1. 点击某个按钮，将设置的目标内容(例如下载链接地址)复制到剪切板，可以在电脑上任何地方粘贴
2. 不使用任何框架和使用Flash，以最小的代码实现该功能，并能兼容所有主流浏览器

插件选择

• clipboard.js:

1. 官网链接地址：

2. 引入方式：

   • NPM方式：npm install clipboard --save
   • 直接引入：下载源代码以后将相关JS放在目录下，之后引入：<script src="xxx/clipboard.min.js"></script>

3. 使用方式(官方文档例子)：

   • HTML(target包括但不限于input)

         
             点击复制

   • JS

   var clipboard = new ClipboardJS('.btn');//成功回调clipboard.on('success', function(e) {    console.info('Action:', e.action);    console.info('Text:', e.text);    console.info('Trigger:', e.trigger);      e.clearSelection();});//失败回调clipboard.on('error', function(e) {    console.error('Action:', e.action);    console.error('Trigger:', e.trigger);});

更多使用方式和功能请参考官方文档，这里只举例一个实用且常用的功能！

兼容性：

正文开始了！！！，在Vue中咋用？

1. Vue项目所使用的相关插件(这仅是本人使用到clipboard.js那个项目用到的，不全是必须的)：vue-router、vue-cli、es6-promise、axios、scss、element-ui、clipboard。

2. 使用clipboard步骤介绍开始：

   • 安装：npm install clipboard --save

   • 引入(main.js)：

     import clipboard from 'clipboard';//注册到vue原型上Vue.prototype.clipboard = clipboard;

   • template：

     /*button上的这个ref需要命名一个，名字自己取，下面会讲解为什么*/复制

   • 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'        });    });  }}
3. 对Events的写法解惑及使用clipboard过程中的注意事项：

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

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

• 使用过程中的注意事项

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

使用过程中若有任何疑问，欢迎留言询问！^_^^_^ 不足之处，欢迎各位批评指正！