clipboard 插件的使用（浏览器的复制粘贴功能）

#浏览器兼容性

标浏览器的最低支持版本

 

一、npm 下载

npm install clipboard --save

二、导入组件

import Clipboard from 'clipboard'

三、使用

<button ref="copy" :data-clipboard-text="link" @click="copyLink">复制</button>

<script>
export default{
  data () {
    return {
    link: 'https://clipboardjs.com/'
    }
  }, 

  mounted () {
    this.copyBtn = new Clipboard(this.$refs.copy)
  },

  copyLink () {
      let clipboard = this.copyBtn
      clipboard.on('success', function () {
        console.log('成功')
      })
      clipboard.on('error', function () {
        console.log('失败')
      })
   }
}
</script>

四、文档

https://clipboardjs.com/

---

以上使用是基于Vue的操作，如果自己项目是原生的，可以直接点击上面的文档链接进行查看