vue 点击复制到剪切板

https://www.npmjs.com/package/vue-clipboard2

安装

npm install --save vue-clipboard2

在main.js中引入

import VueClipboard from 'vue-clipboard2'
Vue.use(VueClipboard)

<template>
  <i class="el-icon-document-copy" @click="onCopy"/>
</template>
<script>
export default {
  data() {
     return { value: '需要复制的内容' }
  }
  methods: {
    onCopy() {
      this.$copyText(this.value).then(() => {
        this.$message.success({message:"已成功复制到剪切板"})
      }).catch(() => {
        this.$message.error({message:"复制失败"})
      })
    }
  }
}
</script>

另一个例子

<template>
  <input type="text" v-model="message">
  <button type="button"
      v-clipboard:copy="message"
      v-clipboard:success="onCopy"
      v-clipboard:error="onError">Copy!</button>
</template>
<script>
export default {
  data() {
     return { message: 'Copy These Text' }
  }
  methods: {
    onCopy: function (e) {
      alert('You just copied: ' + e.text)
    },
    onError: function (e) {
      alert('Failed to copy texts')
    }
  }
}
</script>