目录
一、vue实现复制功能
1.功能实现
点击复制弹出复制成功信息,粘贴即可获得复制数据。
2.模板结构
在自己想要复制的内容所在标签上添加一个类名和一个点击事件方法,方法需传入你想复制的值。
<font class="text-copy" @click.stop="_copy(todo.title)">{{ todo.title }}</font>
若只想点击复制按钮时实现复制功能,不想点击文本内容也能复制则可将类名和点击事件都给另外一个标签。
<font>{{ todo.title }}</font><span class="text-copy" @click.stop="_copy(todo.title)"><span>
3.js行为
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();
}
}
考虑到mdn上document.execCommand方法已被弃用,可用navigator.clipboard.writeText方法来代替:
methods: {
// 复制操作
_copy(context) {
navigator.clipboard.writeText(context)
.then(() => {
this.$message.success('复制成功');
})
.catch(err => {
this.$message.error('复制失败');
});
}
}
4.样式
.text-copy{
&::after {
display: inline-block;
// 标签内容
content: '复制';
font-size: 14px;
padding: 0px 3px;
color: #fff;
// 鼠标滑过复制标签时出现游标
cursor: pointer;
background-color: rgba(#000,0.4);
border-radius: 3px;
// 缩小字体
transform: scale(0.5);
}
}
二.延伸扩展
除了可以实现复制功能外也可以用作标签(在所需内容前后添加都可)
如需区分单店,主店,分店三种店铺,需在店铺名前添加标签,如下:
只需设置三个类名对应不同的标签,将样式里的after改成before,,其他样式改成所需的样子,给每个店铺加上不同的类名就行了。