Vue 复制页面内容

方法 1：使用 document.execCommand('copy') 在用户触发的事件中

这种方法适用于用户触发的事件（如点击按钮），因为这是 execCommand('copy') 的唯一允许场景。

<template>
  <button @click="copyToClipboard">复制到剪贴板</button>
</template>
 
<script>
export default {
  methods: {
    copyToClipboard() {
      const text = '要复制的内容'; // 你想复制的文本
      const el = document.createElement('textarea');
      el.value = text;
      el.setAttribute('readonly', '');
      el.style.position = 'absolute';
      el.style.left = '-9999px';
      document.body.appendChild(el);
      el.select();
      document.execCommand('copy');
      document.body.removeChild(el);
      alert('已复制到剪贴板'); // 提示复制成功
    }
  }
}
</script>

方法 2：使用 Clipboard API（推荐方式）

从 Chrome 66 开始，Clipboard API 提供了一个更现代、更安全和更标准的方法来复制内容到剪贴板。这种方法可以在任何上下文中使用，而不需要用户交互。

<template>
  <button @click="copyToClipboard">复制到剪贴板</button>
</template>
 
<script>
export default {
  methods: {
    async copyToClipboard() {
      const text = '要复制的内容'; // 你想复制的文本
      try {
        await navigator.clipboard.writeText(text);
        alert('已复制到剪贴板'); // 提示复制成功
      } catch (err) {
        console.error('复制失败', err);
      }
    }
  }
}
</script>

方法 3：使用第三方库（如 clipboard.js）

如果想要一个更简单、兼容性更好的解决方案，可以考虑使用第三方库如 clipboard.js。这个库封装了浏览器的各种剪贴板操作，并提供了一个简单易用的 API。

首先，你需要安装 clipboard.js：

npm install clipboard --save

然后，在你的 Vue 组件中使用它：

<template>
  <button class="btn" data-clipboard-text="要复制的内容">复制到剪贴板</button>
</template>
 
<script>
import Clipboard from 'clipboard'; // 引入 clipboard.js
export default {
  mounted() {
    new Clipboard('.btn'); // 初始化 Clipboard.js，传入选择器字符串或者DOM元素列表等参数。这里使用了类选择器作为示例。
  }
}
</script>

随手记录一下~