vue中js实现点击复制文本到剪贴板-三种方案

在Vue中实现点击复制文本到剪贴板可以通过以下三种方案来实现：

1. 使用第三方库 v-copy
2. 使用原生JavaScript的 execCommand 方法
3. 使用 navigator.clipboard.writeText 方法（现代浏览器支持）

以下是每种方法的示例代码：

方案1: 使用第三方库 v-copy

首先安装 v-copy 库：

npm install v-copy

然后在Vue组件中使用：

<template>
  <div v-copy="textToCopy" @click="copyText">复制文本</div>
</template>
 
<script>
import { copy } from 'v-copy'
 
export default {
  directives: {
    copy,
  },
  data() {
    return {
      textToCopy: '这是要复制的文本',
    }
  },
  methods: {
    copyText() {
      alert('文本已复制到剪贴板')
    }
  },
}
</script>

方案2: 使用 execCommand 方法

<template>
  <div @click="copyText">复制文本</div>
</template>
 
<script>
export default {
  data() {
    return {
      textToCopy: '这是要复制的文本',
    }
  },
  methods: {
    copyText() {
      const textarea = document.createElement('textarea');
      textarea.value = this.textToCopy;
      document.body.appendChild(textarea);
      textarea.select();
      document.execCommand('copy');
      document.body.removeChild(textarea);
      alert('文本已复制到剪贴板');
    }
  },
}
</script>

方案3: 使用 navigator.clipboard.writeText 方法

<template>
  <div @click="copyText">复制文本</div>
</template>
 
<script>
export default {
  data() {
    return {
      textToCopy: '这是要复制的文本',
    }
  },
  methods: {
    async copyText() {
      try {
        await navigator.clipboard.writeText(this.textToCopy);
        alert('文本已复制到剪贴板');
      } catch (err) {
        console.error('复制失败', err);
      }
    }
  },
}
</script>

注意：navigator.clipboard.writeText 方法可能不会在所有浏览器中工作，特别是较旧的浏览器。因此，建议使用 execCommand 方法作为后备选项。