Vue项目使用clipboard.js实现文字复制,剪切功能
clipboard.js 是一个不依赖flash或者其他框架，将文本复制到剪贴板的插件，不需要过多繁杂的配置或者下载很多脚本文件.
安装：
在vue项目中通过npm工具安装
npm install clipboard --save
在需要使用的组件中引入
import Clipboard from 'clipboard'
Html：
<div> <span>{{ itemID }}</span> <button class="btn" @click="copyFid()" :data-clipboard-text = "itemID">复制</button></div>
Script：
data() { return { //需要复制的信息 itemIDm: 123456, }},
data-clipboard-text：该属性指定需要复制的内容
Html：
<div> <input id=”inp”> <button class="btn" @click="copyFid()" data-clipboard-target="#inp" data-clipboard-action=“cut”></button> </div>
data-clipboard-target：该属性指定复制内容的元素
data-clipboard-action：该属性指定要复制内容（copy），还是剪切内容（cut）,默认为复制, cut 操作只在 input 或者 textarea 元素上生效
methods中创建复制方法
copyFid() { //实例化clipboard插件实例 let clipboard = new Clipboard('.btn') //成功的回调 clipboard.on('success', () => { this.$message({ message: '已复制到粘贴板', type: 'success' }) clipboard.destroy();// 销毁复制缓存,避免出现复制之前复制的内容 }); //失败的回调 clipboard.on('error', () => { this.$message.error('复制失败') }); },