前端點擊按鈕復制內容

本文轉載自查看原文 2019-12-22 18:22 2462 VUE/ vue/ html

一、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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 移動端點擊按鈕復制文本內容 JS復制文本到粘貼板，前端H5移動端點擊按鈕復制文本移動端點擊按鈕復制文本 vue中點擊按鈕復制內容 js 實現頁面點擊按鈕復制內容 vue點擊復制內容在ios端點擊按鈕閃爍解決方法（小tips） mui點擊按鈕復制文本點擊按鈕復制指定代碼 html頁面點擊按鈕，復制文字內容到剪切板