1、安装

npm install clipboard --save

2、文件内引入

import Clipboard from 'clipboard';

3、添加复制按钮
复制的内容可以有三种情况：
（1）、复制指定控件中能够的内容

<input type="text" id="input"  />
<button ref="copy" data-clipboard-action="copy" data-clipboard-target="#input" @click="copyLink">复制
</button>

（2）、声明方法内指定内容

（3）、绑定动态变量

<button id="btn" style="width: 100px; height: 50px;"
            :data-clipboard-text="text" @click="copy()"> 复制
    </button>

4、方法

copy(){
        // let copybtn = document.getElementById('btn');
         //使用此方法绑定按钮，会出现第一次点击失效
        // var clipBoard = new Clipboard(copybtn); 
        //因此使用下面绑定 id 来获取按钮
        var clipBoard = new Clipboard('#btn');
        clipBoard.on('success', function () {
          clipBoard.destroy();              //销毁上一次的复制内容
          clipBoard = new Clipboard('#btn');
          alert('复制成功');
        });
        clipBoard.on('error', function () {
          alert('复制失败，请手动复制')
        })
      }

5、具体代码

<template>
  <div>
    <button id="btn" style="width: 100px; height: 50px;"
            :data-clipboard-text="text" @click="copy()">
      复制
    </button>
  </div>
</template>

<script>
  import Clipboard from 'clipboard';
  export default {
    name: "clipboard",
    data() {
      return {
        text: 'http://www.baidu.com&'+Math.round(Math.random()*10),
      }
    },
    methods: {
      copy(){
        let copybtn = document.getElementById('btn');
        // var clipBoard = new Clipboard(copybtn);
        var clipBoard = new Clipboard('#btn');
        clipBoard.on('success', function () {
          clipBoard.destroy();                        //销毁上一次的复制内容
          clipBoard = new Clipboard('#btn');
          alert('复制成功');
        });
        clipBoard.on('error', function () {
          alert('复制失败，请手动复制')
        })
      }
    }
  }
</script>

<style scoped>

</style>