vue中将文字复制到剪贴板

1、在需要复制的文本元素上添加一个点击事件，例如 @click=“copyText”

2、在 Vue 实例的 methods 中添加一个名为 copyText 的方法，用于实现复制功能。

3、在 copyText 方法中，使用 document.execCommand(‘copy’) 命令将文本复制到剪贴板。

4、示例代码

<template>
  <div>
    <button @click="copyText">复制文本</button>
    <p ref="textToCopy" @click="copyText">这是需要复制的文本</p>
  </div>
</template>

<script>
export default {
  methods: {
    copyText() {
      //获取需要复制的文本内容。
      const text = this.$refs.textToCopy.innerText;
      // 创建一个临时的 textarea 元素。
      const el = document.createElement('textarea');
      // 将需要复制的文本内容赋值给 textarea 元素。
      el.value = text;
      //将 textarea 元素添加到页面中。
      document.body.appendChild(el);
      //选中 textarea 元素中的文本。
      el.select();
      // 执行复制命令，将选中的文本复制到剪贴板
      document.execCommand('copy');
      //从页面中移除 textarea 元素。
      document.body.removeChild(el);
      //弹出提示框，告知用户文本已复制成功。
      alert('文本已复制');
    },
  },
};
</script>