一、VUE
效果：
代码：
1 <template>
2 <div>
3 <el-row style="height:40px" type="flex">
4 <el-col :span="6">
5 <p>{{res}}</p></el-col>
6 <el-col :span="2">
7 <el-button type="button" @click="copy()">复制</el-button>
8 </el-col>
9
10 </el-row>
11 </div>
12 </template>
13 <script>
14 export default {
15 data() {
16 return {
17 res: '要复制的内容',
18 }
19 },
20
21 methods: {
22 copy() {
23 this.$copyText(this.res).then(function (e) {
24 alert('已复制')
25
26 }, function (e) {
27 alert('复制失败')
28 })
29 },
30
31
32 }
33 }
34 </script>
二、html
效果：
代码：
1 <!DOCTYPE html>
2 <html lang="zh">
3 <head>
4 </head>
5 <body>
6 <div>
7 <span id="copy">复制的内容</span>
8 <button type="button" onclick="copy()">复制</button>
9
10 </div>
11 </body>
12 <script type="text/javascript" src="static/js/jquery.min.js"></script>
13 <script type="text/javascript" src="static/js/main.min.js"></script>
14 <script type="text/javascript">
15 function copy() {
16 var copyTest = document.getElementById("copy").innerText;
17 var inputTest = document.createElement('input');
18 inputTest.value = copyTest;
19 document.body.appendChild(inputTest);
20 inputTest.select();
21 document.execCommand("Copy");
22 inputTest.className = 'oInput';
23 inputTest.style.display = 'none';
24 alert('复制成功');
25 }
26 </script>
27
28 </html>