剪切板（复制文本）

实现点击按钮复制文本

---

前言

需求点：点击按钮复制当前文本

---

一、原生navigator

navigator.clipboard?.writeText(row).then(() => {
        this.$message.success('复制成功')
}

由于需求使用了模版字符串，读取不到methods中的方法，所以需要将方法挂载在window当中

window.copyLocation = (row) => {
        navigator.clipboard?.writeText(row).then(() => {
        this.$message.success('复制成功')
})

二、插件vue-clipboard2

1.安装

npm install --save vue-clipboard2

2.使用

如果用到的地方有好几处，建议挂载到vue原型

在main.js注册

import Vue from 'vue'

import VueClipBoard from 'vue-clipboard2'

Vue.use(VueClipBoard)

如果不是很频繁用到此插件的话，建议单个引用到组件即可

在组件中引入

import Vue from 'vue'

import VueClipBoard from 'vue-clipboard2'

Vue.use(VueClipBoard)

使用方法1:

        使用this.$copyText()方法进行复制。

<button @click="copy">复制</button>

copy() {
      this.$copyText(this.value).then(
        function(e) {
          console.log("copy arguments e:", e);
          alert("复制成功!");
        },
        function(e) {
          console.log("copy arguments e:", e);
          alert("复制失败!");
        }
      );
}

使用方法2:

        使用指令的方式进行复制。

<button
        v-clipboard:copy="value"
        v-clipboard:success="firstCopySuccess"
        v-clipboard:error="firstCopyError"
      >复制</button>  

<script>
export default {
  data() {
    return {
      value: "哈哈哈哈哈哈"
    };
  },
  methods: {
    firstCopySuccess(e) {
      console.log("copy arguments e:", e);
      alert("复制成功!");
    },
    firstCopyError(e) {
      console.log("copy arguments e:", e);
      alert("复制失败!");
    }
  }
};
</script>