使用clipboard 来复制内容到剪切板,既可以借用input 内容文字,也可以自己设定需要复制的内容。
第一步: 安装
npm install clipboard --save
第二步:js 文件 引入
import Clipboard from 'clipboard';
第三步:使用
(1)纯复制文本
<div class="body">
<button claass="btn" @click="copy" :data-clipboard-text="this.msg"
data-clipboard-action="copy">复制链接</button>
</div>
data-clipboard-text 代表 复制的文本
data-clipboard-action 设定的操作 ; copy 复制, cut 剪切
data() {
return {
msg: 'hello world';
}
}
methods: {
copy() {
var clipboard = new Clipboard(".btn")
clipboard.on("success", e => {
this.$message.success('复制成功');
// 释放内存
clipboard.destroy()
})
clipboard.on("error", e => {
this.$message.success('复制失败');
// 释放内存
clipboard.destroy()
})
}
}
(2)复制另一个元素的内容
<div class="box">
<input id="ipt" value="helloword"></input>
<button class="btn" @click="copy" data-clipboard-target="#ipt"></button>
</div>
data-clipboard-target 要复制的目标节点
methods: {
copy() {
var clipboard = new Clipboard(".btn", {
target: function(trigger) {
return document.getElementById('ipt');
}
});
clipboard.on("success", e => {
this.$message.success('复制成功');
// 释放内存
clipboard.destroy()
})
clipboard.on("error", e => {
this.$message.success('复制失败');
// 释放内存
clipboard.destroy()
})
}
}