clipboard.js 使用(復制)

官網地址 : 不依賴flash, 不依賴其他框架，gzip壓縮后只有3kb大小

在使用 clipboard.js 之前，你可以通過 NPM 或 CDN 的方式來安裝它：

NPM

npm install clipboard --save

CDN

<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.6/dist/clipboard.min.js"></script>

 

lipboard.js 使用起來很簡單，一般只要 3 個步驟：

<template>
  <div id>
    <p id="share-code">{{init}}</p>
    <el-button
      class="copy-btn"
      data-clipboard-action="copy"
      data-clipboard-target="#share-code" // 要復制內容的標簽(id或者class)
      @click="fuzhi"
    >復制</el-button>
  </div>
</template>

<script>
import Clipboard from 'clipboard'
export default {
  data() {
    return {
      init: '1111'
    }
  },
  methods: {
    fuzhi() {
      if (!this.init) return
      var clipboard = new Clipboard('.copy-btn')
      clipboard.on('success', e => {
        console.log('復制成功')
        // 釋放內存
        clipboard.destroy()
      })
      clipboard.on('error', e => {
        // 不支持復制
        // console.log('該瀏覽器不支持自動復制')
        // 釋放內存
        clipboard.destroy()
      })
    }
  }
}
</script>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

a