怎么在Vue中使用clipboard实现一个复制功能

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

专注于为中小企业提供网站制作、网站建设服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业中阳免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了上1000+企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。

首先现在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实现一个复制功能问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注创新互联行业资讯频道了解更多相关知识。
            
            
                        

            文章名称：怎么在Vue中使用clipboard实现一个复制功能            

            当前地址：http://cqcxhl.cn/article/ipcchh.html