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()  
  }) 
}