clipboard.js的使用

使用方式:
1. 引入: import Clipboard from 'clipboard'
2. 实例化Clipboard
  • 需要传入一个DOM选择器,HTML元素,或者HTML元素列表
    e.g.: new Clipboard('#copy-share-text');
3. 确定需要复制的内容:
  • 从另一个元素复制内容,给目标元素添加data-clipboard-target属性实现;
  • 从另一个元素剪切文本,给目标元素添加data-clipboard-action属性指明想要复制还是剪切内容(默认复制,属性值为cut剪切);
  注意:cut 操作只在<input> 或者 <textarea> 元素上生效;
  • 直接写好需要复制的内容,给目标元素添加data-clipboard-text属性,属性值就是需要复制的内容

4. 问题及解决:

  • 多次成功提示:
    解决:
    • 每次初始化实例之前销毁之前创建的实例
    • 离开当前页面销毁实例 (方法:instance.destroy()
  • 复制没有反应的处理:
    问题描述:使用this.$refs获取复制按钮点击之后初始化clipboard复制没反应解决:

        解决:

    • 改为css选择器之后ok(类选择器、id选择器均可,别的暂未尝试)

原文地址:https://www.cnblogs.com/fcybp/p/14417650.html