vue通过插件clipboard复制文本

1、下载

npm install clipboard --save 

2、在需要复制的组件中引入

import Clipboard from 'clipboard'

　　也可以在main.js中引入：

import Clipboard from 'clipboard'
Vue.prototype.$clipboard = Clipboard;

　　此时在使用的时候 Clipboard 需改为 this.$clipboard

let clipboard = new this.$clipboard('.copy_btn')

3、通过属性 data-clipboard-text 绑定需要复制的值，设置一个类名供插件获取dom，通过点击事件触发回调

    <input type="text" v-model="message" />
    <el-button class="copy_btn" :data-clipboard-text="message" @click="handleCopy">点击复制</el-button>

    handleCopy() {
      let clipboard = new Clipboard('.copy_btn')
      clipboard.on('success', (e) => {
        this.$message.success('复制成功')
        clipboard.destroy() // 释放内存
      })
      clipboard.on('error', (e) => {
        this.$message.error('不支持复制')
        clipboard.destroy() // 释放内存
      })
    }

完整代码：

<template>
  <div>
    <input type="text" v-model="message" />
    <el-button class="copy_btn" :data-clipboard-text="message" @click="handleCopy">点击复制</el-button>
  </div>
</template>
<script>
import Clipboard from 'clipboard'
export default {
  data() {
    return {
      message: '我是可以复制的内容，请点击复制'
    }
  },
  methods: {
    handleCopy() {
      let clipboard = new Clipboard('.copy_btn')
      clipboard.on('success', (e) => {
        this.$message.success('复制成功')
        clipboard.destroy() // 释放内存
      })
      clipboard.on('error', (e) => {
        this.$message.error('不支持复制')
        clipboard.destroy() // 释放内存
      })
    }
  }
}
</script>