1、方法一
(1)html脚本
<button @click="copyWx(wx)" size="medium" type="primary" plain>复制微信号</button>
(2)js脚本
export default {
components:{},
data(){
return{
wx:"k369312"
}
},
methods:{
copyWx(item) {
// 模拟 输入框
var cInput = document.createElement("input");
cInput.value = item;
document.body.appendChild(cInput);
cInput.select(); // 选取文本框内容
// 执行浏览器复制命令
// 复制命令会将当前选中的内容复制到剪切板中(这里就是创建的input标签)
// Input要在正常的编辑状态下原生复制方法才会生效
document.execCommand("copy");
this.$message({
type: "success",
message: "微信号复制成功"
});
// 复制成功后再将构造的标签 移除
document.body.removeChild(cInput);
}
}
}
方法二
(1)引入clipboard.js
- 通过npm安装:npm install clipboard –save
- 通过通过引入源文件:下载地址
<script src="js/clipboard.min.js"></script>
(2)在需要使用的组件里import
import Clipboard from 'clipboard'
(3)使用和方法
<span class="tag-read" data-clipboard-text="我是点击复制的内容" @click="copy">我是点击复制的内容</span>
copy () {
var clipboard = new Clipboard('.tag-read')
clipboard.on('success', e => {
console.log('复制成功')
// 释放内存
clipboard.destroy()
})
clipboard.on('error', e =>{
// 不支持复制
console.log('该浏览器不支持复制')
// 释放内存
clipboard.destroy()
})
},