vue-复制功能实现--clipboard.js

官网：clipboard

安装依赖包装

npm install clipboard --save

需求实现

页面单个复制

// vue中
<button class="btn" data-clipboard-text="被复制文字">复制</button>
// js中
import Clipboard from "clipboard";
// 初始化---created生命周期中
var clipboard = new ClipboardJS('.btn')
// 成功之后的操作 
clipboard.on('success', function (e) {
  Toast('复制成功！')
});
// 失败的操作 
clipboard.on('error', function (e) {
   Toast('复制失败，请手动复制！')
});

页面多个复制

// vue
<button @click="copyText(.btn)" class="btn" data-clipboard-text="被复制文字">复制</button>
<button @click="copyText(.btn2)" class="btn2" data-clipboard-text="被复制文字2">复制2</button>
// js
import Clipboard from "clipboard";
copyText (dom) {
  var clipboard = new ClipboardJS(dom);
  // 成功之后的操作 ，清空选中
  clipboard.on('success', function (e) {
  });
  // 失败的操作 
  clipboard.on('error', function (e) {
  });
}