Vue点击复制功能clipboard组件的使用

 使用clipboard.js组件实现点击复制功能

1. 安装：npm install clipboard --save

2. 项目中引入：

   main.js

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

3. 使用（template内）：

        我使用了elementUI框架的tooltip和button两个组件

        （方便清晰学习，代码部分是两个组件分别使用方法）

（1）tooltip：

<el-tooltip placement="top">
    <div slot="content" >点击复制</div> //或者在el-tooltip设置content属性
    <div class="copyBtn" :data-clipboard-text="copyData" @click="getCopy()">{{ copyData }}</div>
</el-tooltip>

        注意：如果复制全局变量里的值，data-clipboard-text要用v-bind绑定，否则复制的是变量名

（2）button：

<!-- target -->
//利用id绑定按钮的clipboard目标
<div id="copyTrigger" class="copyBtn">{{ copyData }}</div>
<div slot="footer">
<!-- trigger -->
//data-clipboard-action有copy和cut两个类型，cut只限于input和textarea标签
<el-button class="copyBtn" data-clipboard-action="copy" data-clipboard-target="#copyTrigger" @click="getCopy()" type="primary" plain>一键复制</el-button>
</div>

    methods

getCopy() {
    //使用main.js内注册的vue原型，用class绑定将数据存储到clipboard中
    let clipboard = new this.clipboard('.copyBtn');
    clipboard.on('success', e => {
      this.$message({
        message: '复制成功！',
        type: 'success'
      });
      //清除选中
      e.clearSelection();
      //释放内存，以防重复复制
      clipboard.destroy();
    });
    clipboard.on('error', () => {
      this.$message.error('复制失败，请手动选择复制！');
    });
},

4. 遇到的问题：

        （1）在main.js内注册vue原型的原因：

                官方原语句

                 我在使用时出现报错  

        （2）通过class挂载dom节点，没用使用ref的原因：

出现报错First argument must be a  String, HTMLElement, HTMLCollection, or NodeList"

 初入前端，当作笔记来记录工作中遇到的学习过程，不足之处还请各位大佬指点！