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的操作，如果自己項目是原生的，可以直接點擊上面的文檔鏈接進行查看