剪贴板 Clipbardjs 的使用教程，Vue

官方API ​​https:///zenorocha/clipboard.js​​

一、添加对应包

package.json

"clipboard": "^2.0.8"

二、引用 clipboardjs

在需要使用 ​​clipboardjs​​ 的页面中引用它

import ClipboardJS from "clipboard"

三、使用方法

1. 复制固定内容

第一种方法，是直接把需要复制的内容绑定到对应的 dom 元素上的 ​​data-clipboard-text​​ 属性上，当点击它的时候就会复制这个内容了。

<button class="btn" data-clipboard-text="这里是复制的内容">
let clipboard = new ClipboardJS('.btn')

clipboard.on('success', function (e) {
  console.info('Action:', e.action)
  console.info('Text:', e.text)
  console.info('Trigger:', e.trigger)
  e.clearSelection()
})

2. js 复制任意内容

第二种方法是通过 js 处理需要复制的内容，比较灵活，可以复制任何内容。我一般使用这种方法。

比如这里我有一个自定义的元素，在点击的时候复制它的卡号。

剪贴板 Clipbardjs 的使用教程，Vue_使用教程

核心代码如下

Vue

<div title="复制卡号" 
  class="operation-btn clipboard" 
  :dataClipboard='card'>
          <i class="el-icon-document-copy"></i>
</div>

JS

data(){
  return {
    clipboard: null // 存放当前创建的 clipboard 对象，用于页面卸载时删除，避免出现切换页面时多次复制的情况
  }
},
mounted(){
    // 1. 绑定剪贴板操作方法
        this.clipboard = new ClipboardJS('.clipboard', {
            text: function (trigger) {
              // 2. trigger 就是点击的 dom 元素，所以就可以通过它来获取到它的属性 'dataClipboard' 的值了
              // 3. 从这个方法返回的 string 就是会复制到剪贴板中的内容，所以可以复制任何内容了，也可以在这里处理一些逻辑
              // 4. 我在这里就只是单纯的输出了事先绑定好的值
                return trigger.getAttribute('dataClipboard')
            },
        })
        // 5. 当复制成功的时候提示复制成功
        this.clipboard.on('success', ()=>{  // 还可以添加监听事件，如：复制成功后提示
            this.$message.success('复制成功')
        })
},
beforeDestroy(){
     this.clipboard.destroy() // 6. 销毁 clipboard 避免弹出多个复制成功提示框
}

四、结果

正常复制成功后会提示
剪贴板 Clipbardjs 的使用教程，Vue_剪贴板_02

但如果没有 ​​destroy​​​ 那一步，就会再现这样的情况。
原因是在切换页面时，当前页面重载时，之前的实例并没有销毁，全部响应了。

剪贴板 Clipbardjs 的使用教程，Vue_前端_03