clipboard插件的使用

2020-04-24 15:20:16 蜻蜓队长

  写在前面:clipboard是一个提供复制功能的插件,非常好用。
  最近在项目中有一些复制的功能的需求,看了下clipboard这款插件提好用的,记录一下。
  1,npm install clipboard --save  先下一下插件;
  2,我的项目是vue的,所以在你需要用到的页面中引入一下
  
 import Clipboard from 'clipboard'

  3,比如要复制一个url链接在template里面需要给给绑定事件的元素绑定一个类名

  

<div>qbUrl:{{qb_url}}<Button type="primary" size="small" class="copy-qb" @click="copyQbUrl(qb_url)">复制</Button></div>

  4,在methods中绑定的事件

copyQbUrl (url) {
      let clipboard = new Clipboard ('.copy-qb', {
        text: () => {
          return url
        }
      })
      clipboard.on('success', () => {
        this.$Message.success('复制成功!')
        clipboard.destroy()
      })
      clipboard.on('error', () => {
        this.$Message.success('复制失败,请手动复制!')
        clipboard.destroy()
      })
    }

 

 

以上内容来自于网络,如有侵权联系即删除
相关文章

上一篇: 第八章——Linux设备模型(1)

下一篇: 徒手编写Spring的初始化之山寨版IOC容器

客服紫薇:15852074331
在线咨询
客户经理