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