Vue实现复制指定的值

水深无声 2023-06-16 13:55 5阅读 0赞

# 项目需求 #

![在这里插入图片描述][2019112617361556.png]  
  当我单击“复制”按钮的时候，需要复制上前面的“中国民生…支行”。

# 实现方式 #

思路：用剪切板的插件，单击复制的时候复制指定的内容到剪切板上。  
  代码：  
  1.安装插件

npm install clipboard --save

2.界面引入

import Clipboard from 'clipboard';

3.界面使用

<van-col class="h4" data-clipboard-text="中国民生银行股份有限公司北京建国门支行">中国民生银行股份有限公司北京建国门支行   <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}}   <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()  
      }) 
    }

[2019112617361556.png]: https://img-blog.csdnimg.cn/2019112617361556.png