1、HTML
在想要复制的内容元素中加上:一个类名和一个点击事件方法(方法需传入你想复制的值)。
<p class="text-copy" @click.stop="copy(title)">视频地址 {{title}}</p>
2、JS
data(){
return{
title:'https://www.baidu.com' //要复制的内容
}
},
methods: {
// 复制操作
copy(context) {
// 创建输入框元素
let oInput = document.createElement('input');
// 将想要复制的值
oInput.value = context;
// 页面底部追加输入框
document.body.appendChild(oInput);
// 选中输入框
oInput.select();
// 执行浏览器复制命令
document.execCommand('Copy');
// 弹出复制成功信息
this.$message.success('复制成功');
// 复制后移除输入框
oInput.remove();
}
}
3、CSS
.text-copy {
&::after {
// display: inline-block;
// 标签内容
content: '复制';
font-size: 10px;
margin-left: 5px;
// padding: 0px 3px;
color: #fff;
// 鼠标滑过复制标签时出现游标
cursor: pointer;
background-color: #0084f4;
border-radius: 3px;
// 缩小字体
transform: scale(0.5);
}
}