vue+element-ui 项目中实现复制文字链接功能

需求: 点击复制按钮,复制一个链接

在GitHub上找到一个clipboard组件,功能比较齐全

使用方法:

 

安装

npm i clipboard --save

HTML

 

js文件

// 引入
import Clipboard from 'clipboard'
export default {
  data () {
    return {
      isShow: false,
      word: 'success',
      url: ''
    }
  },

  // 实例创建后,进行默认数据处理
  created () {
    this.url = `${location.hostname}/#/login`
  },
  // 方法集合
  methods: {
    // 复制链接方法
    copyLink () {
      let clipboard = new Clipboard('.btn')
      clipboard.on('success', e => {
        this.isShow = true
        this.word = 'Success'
        setTimeout(() => {
          this.isShow = false
        }, 500)
        clipboard.destroy() // 使用destroy可以清楚缓存
      })
      clipboard.on('error', e => {
        this.word = 'Fail'
        this.isShow = true
        setTimeout(() => {
          this.isShow = false
        }, 500)
        clipboard.destroy()
      })
    }
  }
}

点击复制,成功,这样就复制成功了

这个组件还有一些其他功能,可以阅读下文档http://www.clipboardjs.cn/

转载于:https://www.cnblogs.com/steamed-twisted-roll/p/11540766.html