一、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);}
}