Hey,天还没亮,夜猫子,要注意身体哦!

Vue.js采用vue-clipboard2插件实现剪贴板复制功能

   

原生JS和JQuery都有很多种实现剪贴板复制功能的方法,既然用到Vue了,当然要试一下新的方法。在npm里搜索了一下,发现Vue实现剪贴板功能的插件有非常多,我就选了vue-clipboard2这个插件。

vue-clipboard2的使用方法很简单

    1. 引入vue-clipboard2.js
    2. script里定义点击事件(蓝色字体就是vue-clipboard2剪贴板复制功能的代码):
      1. copyPath: function(index) {
      2.     let path = this.tableData[index].path;
      3.     let fullPath = location.protocol + "//" + window.location.host + path.substring(2, path.length);
      4.     this.txt = fullPath;
      5.     console.log(fullPath);
      6.     this.$copyText(this.txt).then(function(e) {  
      7.         vm.$notify({  
      8.             title: '复制成功!',  
      9.             message: '',  
      10.             type: 'success'  
      11.         });  
      12.         console.log(e);  
      13.     }, function(e) {  
      14.         vm.$notify.error({  
      15.             title: '复制失败!',  
      16.             message: ''  
      17.         });  
      18.         console.log(e)
      19.     })
      20. }
    3. 给某个按钮绑定以上点击事件即可

npm地址:https://www.npmjs.com/package/vue-clipboard2

未经允许不得转载:Rising Sun's Blog » JS / Vue.js / 前端 » Vue.js采用vue-clipboard2插件实现剪贴板复制功能
标签:
评论 0
 
 
发表评论