复制粘贴插件clipboard.js使用说明

作者:Kinglong    发表时间:2023-07-15 05:37   

关键词:  

一、安装方式

①下载js插件本地调用,用附件中的clipboard.js    

插件下载地址:https://github.com/zenorocha/clipboard.js/

引用:<script src="dist/clipboard.min.js"></script>

②pm方式安装调用    npm install clipboard --save    

该方式在vue中无法正常调用

二、调用样例

<button type="button" class="copy-button">复制</button>

 var clipboard = new ClipboardJS('.copy-button',{   

 text: function(){

    //对json进行格式化,jsonString为要复制的内容
    return JSON.stringify(jsonString,null,4); 
 },

 //模态框必须加这句代码,json-dialog-model为模态框ID
 container: document.getElementById('json-dialog-model') 
});
 clipboard.on('success', function(e){
   self.$message({
       type: 'success',
       message: '复制成功'
 })
 console.log(e);
  });
 clipboard.on('error', function(e){
   self.$message({
   type: 'info',
   message: '复制失败'
   })
   console.log(e);
 });

}

参考附件压缩包clipboard.js-master.zip路径下clipboard.js-master\demo的demo例子。