来自前端的快捷复制
# 来自前端的快捷复制
通过ElementUI的图标作为媒介 进行点击,代码如下
HTML
<i class="el-icon-document-copy"
@mouseover="handleMouseOver"
@mouseout="handleMouseOut"
:class="{ 'hover-blue': isHover }"
@click="copyToClipboard(row.chanceId)"
></i>
1
2
3
4
5
6
2
3
4
5
6
函数方法
methods: {
<!-- 鼠标划过触发 -->
handleMouseOver() {
this.isHover = true;
},
<!-- 鼠标移出触发 -->
handleMouseOut() {
this.isHover = false;
},
<!-- 内容复制 -->
copyToClipboard(value) {
try {
let copyInput = document.createElement('input'); // 创建一个新的输入框元素,并将其赋值给变量copyInput
copyInput.id = 'copyInput'; // 将输入框的ID设置为'copyInput'
copyInput.value = value; // 将输入框的值设置为指定的值
// 开始复制
document.body.appendChild(copyInput); // 将输入框添加到文档的body中
document.getElementById('copyInput').select(); // 选中输入框中的文本
document.execCommand('copy'); // 将选中的文本复制到剪贴板
document.getElementById('copyInput').remove(); // 移除输入框
// 提示
this.$message({ showClose: true, message: '复制成功', type: "success" });
} catch (e) {
this.$message({ showClose: true, message: '复制失败', type: "error" });
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
CSS样式
<!--
绑定css样式 :class="{ 'hover-blue': isHover }"
添加鼠标变小手,颜色变换
-->
.hover-blue {
color: #50bfff;
cursor: pointer;
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
好了 结束了
上次更新: 2023/11/01, 14:31:26