項目中經常會遇到點擊按鈕複製訂單號、訂單id等內容到粘貼板中的需求。可是在網頁上我們通常都是用Ctrl + c或右擊複製的，別擔心，js也是有複製命令的，那就是document.execCommand('copy'); 這個命令會將選中的內容複製到粘貼板中，那豈不是還需要選中？別急input和textarea元素有一個select()方法，這個方法可以幫我們自動選中。於是就有了下面的代碼，複製過去試試吧！

 

 1 function copy(text) {
 2     var input = document.createElement('input');
 3     input.setAttribute('readonly', 'readonly'); // 防止手機上彈出軟鍵盤
 4     input.setAttribute('value', text);
 5     document.body.appendChild(input);
 6     // input.setSelectionRange(0, 9999);
 7     input.select();
 8     var res = document.execCommand('copy');
 9     document.body.removeChild(input);
10     return res;
11 }

 

思路分析：

1. 創建input或textarea，因爲這兩個DOM具有select方法，可以選中內容（document.execCommand('copy')複製內容必要條件）;
2. 給input賦值爲需要賦值的內容
3. 將DOM添加到文檔中
4. 選中輸入框中的值（也就是要複製的值）
5. 執行復制命令
6. 最後別忘了從文檔中移除DOM元素
7. 此函數最後返回了複製是否成功的結果（true/false，document.execCommand('copy')本身會返回true/false），你可以做相應的交互提示等。

 

我在一個Vue項目中用這種原生的方式實現啦。

1   <el-dialog
2         width="38%"
3         title="學生加入方式"
4         :visible.sync="innerVisible"
5         append-to-body>
6         <span>學生可通過如下方式加入班級，班級學生滿後其他學生將不能加入</span>
7         <p>口令:{{this.command}}</p>
8         <el-button type="primary" @click="copyText">複製口令 </el-button>
9  </el-dialog>

 

 1  data() {
 2     return {
 3         command:'口令是123456789',
 4         innerVisible:false
 5     }
 6   },
 7   computed:{
 8   },
 9   mounted() {
10   },
11   methods:{
12      ......
13       //複製口令
14       copyText(){
15           let text = this.command
16           if(this.copy(text)){
17               this.$message.success('口令內容已經複製到剪切板！')
18           }else{
19               this.$message.error("抱歉，複製失敗！")
20           }
21       },
22       //複製
23     copy(text) {
24         var input = document.createElement('input');
25         input.setAttribute('readonly', 'readonly'); // 防止手機上彈出軟鍵盤
26         input.setAttribute('value', text);
27         document.body.appendChild(input);
28         // input.setSelectionRange(0, 9999);
29         input.select();
30         var res = document.execCommand('copy');
31         document.body.removeChild(input);
32         return res;
33     },
       ......
34   }

效果展示：

 

二.插件實現

如果是Vue項目的話，還可以用一個Vue插件實現---第三方插件 clipboard

1.安裝插件

npm install vue-clipboard2 --save

 

2.全局注入（main.js）

import VueClipboard from 'vue-clipboard2'

Vue.use(VueClipboard)

 

3.使用

1 <ul class="file-list">
2   <li v-for="(f, index) of files" :key="index">
3     <span>[文件{{index + 1}}] {{f}}</span>
4     <span class="copy-btn" v-clipboard:copy="f" v-clipboard:success="onCopy" v-clipboard:error="onError">複製</span>
5   </li>
6 </ul>

1 // 複製成功時的回調函數
2 onCopy (e) {
3    this.$message.success("內容已複製到剪切板！")
4 },
5 // 複製失敗時的回調函數
6 onError (e) {
7    this.$message.error("抱歉，複製失敗！")
8 }

 

三.後記

因爲小玲的這個項目中只有這一個地方會用到複製的功能，所以小玲沒有在項目中引入這個插件，而是選擇用原生js的方式來實現複製功能。如果你的項目中很多地方要用到複製文本的功能，可以考慮使用這個 clipboard 插件。當然具體怎麼選擇還是根據項目的實際情況吧~

 

參考文檔：

https://www.cnblogs.com/zhaodesheng/p/11464934.html

https://www.cnblogs.com/similar/p/10757540.html