怎么在Vue中使用clipboard实现一个复制功能-创新互联

怎么在Vue中使用clipboard实现一个复制功能？针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

首先现在Vue中引入clipboard

npm install clipboard --save

在需要使用的组件中import 引入clipboard

import Clipboard from 'clipboard';

clipboard的实际使用

不论是单按钮复制还是多按钮复制，一定要在页面加载DOM完成后先New出来具有复制功能的按钮，如果在函数内再New那么可能会出现点击复制按钮两次，才复制成功的现象，如下：

mounted() {
  var copybtn = document.getElementsByClassName('btn')
  this.clipboard = new Clipboard(copybtn);
  }
绑定复制内容的方式有以下几种：

 复制
    


复制

new Clipboard('copyBtn',function(){
  return 
})
copy(){
  let _this = this
  
  clipboard.on('success', function () {
    Toast('复制成功')
    _this.destroy() 
    _this.clipboard = new Clipboard(copyBtn);
  })
  clipboard.on('error', function () {
    Toast('复制失败，请手动复制')
   })
  }
关于怎么在Vue中使用clipboard实现一个复制功能问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注创新互联成都网站设计公司行业资讯频道了解更多相关知识。
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
                

                网页名称：怎么在Vue中使用clipboard实现一个复制功能-创新互联                

                网站链接：http://dzwzjz.com/article/cddiej.html