实现复制一个和复制多个的功能：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>前端实现复制一个和复制多个的功能</title>
<!--引入 element-ui 的样式，-->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<!-- 引入element 的组件库-->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
#app {
margin: 50px;
}
.ID {
margin-bottom: 100px;
}
.copy-id {
font-weight: 400;
font-size: 12px;
line-height: 18px;
color: #2c66ff;
margin-top: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="app">
<div class="ID">
ID：{{ paramsId }}
<div class="copy-id" @click="copyFun">复制ID</div>
</div>
<div class="ID">
<div v-for="(item, index) in arr" :key="index">{{item}}</div>
<span class="copy-id" @click="copyAllFun">复制全部</span>
</div>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
paramsId: '1234567',
arr: [
'第一条数据',
'第二条数据',
'第三条数据',
]
}
},
created() {
},
methods: {
// 复制单个功能
copyFun() {
// 创建input标签
var input = document.createElement("input");
// 将input的值设置为需要复制的内容
input.value = this.paramsId;
// 添加input标签
document.body.appendChild(input);
// 选中input标签
input.select();
// 执行复制
document.execCommand("copy");
// 移除input标签
document.body.removeChild(input);
// 成功提示信息
this.$message({
message: 'ID复制成功',
type: 'success'
});
},
// 复制全部功能
copyAllFun() {
// 创建textarea标签
var textarea = document.createElement("textarea");
// 将textarea的值设置为需要复制的内容
const textAray = this.arr.map((item, index) => {
// \r\n: 回车换行
return `${index + 1}. ${item}\r\n`;
});
textarea.value = textAray.join("");
// 添加textarea标签
document.body.appendChild(textarea);
// 选中textarea标签
textarea.select();
// 执行复制
document.execCommand("copy");
// 移除textarea标签
document.body.removeChild(textarea);
// 成功提示信息
this.$message({
message: '数据复制成功',
type: 'success'
});
},
}
})
</script>
</body>
</html>复制成功后，可以直接做粘贴的操作
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。