安装clipboard

npm install clipboard --save

引入

在 main.js 中

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

组件中使用

1、方法一

<template>
  <div>
    <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>
  </div>
</template>
<script>
export default {
  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'
          });
      });
    }
  }
}
</script>

2、方法二

在页面中使用

<p class="clipboardObj" :data-clipboard-text="inviteCode" @click="copy">一键复制</p>

在方法里写

copy () {
    let clipboard = new Clipboard('.clipboardObj') // 这里可以理解为选择器，选择上面的复制按钮
    clipboard.on('success', e => {
        console.log('复制成功')
        // 释放内存
        clipboard.destroy()
    })
    clipboard.on('error', e => {
        // 不支持复制
        console.log('复制失败')
        // 释放内存
        clipboard.destroy()
    })
}

也有可能遇到复制没有反应 我遇到有两种情况，第一种需要复制的内容为空 第二中 选择器没有找到要复制的内容 可以采取另一种方式

<p @click="copy($event,inviteCode)">一键复制</p>  //inviteCode要复制的值 

copy(e, text) {
    const clipboard = new Clipboard(e.target, { text: () => text })
    clipboard.on('success', e => {
        console.log('复制成功')
        // 释放内存
        clipboard.off('error')
        clipboard.off('success')
        clipboard.destroy()
    })
    clipboard.on('error', e => {
        // 不支持复制
        console.log('复制失败')
        // 释放内存
        clipboard.off('error')
        clipboard.off('success')
        clipboard.destroy()
    })
    clipboard.onClick(e)
}