vue实现点击按钮复制文本或者“复制标签元素”

首先下载安装

npm install --save vue-clipboard2

然后在main.js 中引入

import Vue from 'vue'
import VueClipboard from 'vue-clipboard2'    // 引入
Vue.use(VueClipboard)    // vue全局使用插件

复制普通文本例子：

<template id="demo">
  <div>
    <p>{{message}}</p>
    <button type="button"
      v-clipboard:copy="message"
      v-clipboard:success="onCopy"
      v-clipboard:error="onError">复制</button>
  </div>
</template>
 
<script>
 
export default {
  data() {
    return {
      message: '要复制的内容'
    }
  },
  methods: {
    // 复制成功
    onCopy: function (e) {
      console.log('成功复制： ' + e.text)
    },
    // 复制失败
    onError: function (e) {
      console.log('复制失败')
    }
  }
}
</script> 

或者

 <template id="t">
    <div class="container">
    <p>{{message}}</p>
    <button type="button" @click="doCopy">复制</button>
    </div>
  </template> 
<script>
 
export default {
  data() {
    return {
      message: '要复制的内容'
    }
  },
 methods: {
   doCopy: function () {
     this.$copyText(this.message).then(function (e) {
        console.log('复制成功',e.text)
     }, function (e) {
        console.log(err)
        console.log('不能复制，复制失败')
     })
   }
 }
}
</script> 

点击“复制标签元素”：
给复制按钮添加点击事件@click=“onCopy()”

 <button type="button" 
      v-clipboard:copy="value"
      v-clipboard:success="onCopy"
      v-clipboard:error="onError"
      v-for="(item, index) in data"
      :key="index"
      @click="onCopy(createCopy(item), $event)"
      >{{item}}</button>
<script>
export default {
  data() {
    return {
      value: "",
      data: ["red", "black", "pink"],
      driver: null,
    };
  },
  mounted() {},
  methods: {
    firstCopySuccess(e) {
      console.log("copy arguments e:", e);
      alert("复制成功!");
    },
    firstCopyError(e) {
      console.log("copy arguments e:", e);
      alert("复制失败!");
    },
    createCopy(item) {
      return `<div  style="color:${item}"></div>`;
    },
    onCopy(text, event) {
      console.log(text, event);
      this.value = text;
    },
  },

  computed: {},
  watch: {},
};
</script>