通用的复制-----clipboard.js

504 阅读1分钟

1.npm安装

npm install clipboard --save

2.引入

import Clipboard from 'clipboard';

3.两种复制方法

  • 属性data-clipboard-text使用
div class="copy_btn" @click="handleCopy($event)" data-clipboard-text="12312321312">
    <span>复制</span>
</div>
  • 标签data-clipboard-target="#bar"使用
<span id="bar">xxxxx</span>
div class="copy_btn" @click="handleCopy($event)" data-clipboard-target="#bar">
    <span>复制</span>
</div>

4.方法调用

/* 点击复制按钮 */
handleCopy(event) {
  const clipboard = new Clipboard(".copy_btn")
  clipboard.on('success', e => {
    this.toast("复制成功")
    clipboard.destroy() // 释放内存
  })
  clipboard.on('error', e => {
    this.toast("复制失败")
    clipboard.destroy() // 释放内存
  })
},