前端实现复制一个和复制多个的功能

实现复制一个和复制多个的功能:

代码:

<!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>

复制成功后,可以直接做粘贴的操作

作者:我的一个道姑朋友原文地址:https://segmentfault.com/a/1190000043866768

%s 个评论

要回复文章请先登录注册