使用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"

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

Logo

前往低代码交流专区

更多推荐