Vue實現複製指定的值

項目需求

  
  當我單擊“複製”按鈕的時候，需要複製上前面的“中國民生…支行”。

實現方式

  思路：用剪切板的插件，單擊複製的時候複製指定的內容到剪切板上。
  代碼：
  1.安裝插件

npm install clipboard --save

  2.界面引入

import Clipboard from 'clipboard'; 

  3.界面使用

<van-col class="h4" data-clipboard-text="中國民生銀行股份有限公司北京建國門支行">中國民生銀行股份有限公司北京建國門支行&nbsp;&nbsp;&nbsp;<a style="color:#0045AD" @click="copy">複製</a></van-col>

copy() {  
   var clipboard = new Clipboard('.h4')  
   clipboard.on('success', e => {  
         Toast("開戶行名稱複製成功");
         // 釋放內存  
         clipboard.destroy()  
   })  
   clipboard.on('error', e => {  
         // 不支持複製  
         Toast('該瀏覽器不支持自動複製')  
         // 釋放內存  
         clipboard.destroy()  
   })  
 },

小思考

  如果要複製的內容是後端接口返回的一個變量值怎麼處理呢？

<van-col class="copyContent">{{accountCode}}&nbsp;&nbsp;&nbsp;<a style="color:#0045AD" @click="copy()">複製</a></van-col>

copy(){
  // this.content 後端返回的值
  var content = this.content;
  var clipboard = new Clipboard('.copyContent',{
      text:function(){
          return content;
      }
  })  
  clipboard.on('success', e => {  
        Toast("備註信息複製成功");
        // 釋放內存  
        clipboard.destroy()  
  })  
  clipboard.on('error', e => {  
        // 不支持複製  
        Toast('該瀏覽器不支持自動複製')  
        // 釋放內存  
        clipboard.destroy()  
  }) 
}