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('复制失败')
});
},
原文始发于微信公众号（前端24）：Vue项目使用clipboard.js实现文字复制,剪切功能
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/217015.html
