vue中实现点击复制功能

462 阅读1分钟

1、npm安装

npm install clipboard --save

2、在页面中引入:

import Clipboard from 'clipboard';

3、绑定点击事件:

  <div class="copyData" @click="copy()">点击复制</div>

4、方法:

 copy () {   
   var Url = '我是要复制的内容哦' // 点击文字复制的地址   
   var clipboard = new Clipboard('.copyData', {     
   text: function () {     
     return Url      
  }   
   })   
   // 复制成功  
    clipboard.on('success', e => {   
     console.log('已复制')      
  // 释放内存    
    clipboard.destroy()  
    })    
  // 复制失败  
    clipboard.on('error', e => {   
     // 不支持复制   
     console.log('复制失败')   
     // 释放内存      
  clipboard.destroy()   
   }) 
   }

5、功能已实现,注意:要复制的内容不能为空!!!