vue3+element 实现复制内容到剪切版

在 Vue3 中，我们同样可以使用 Clipboard API 来实现复制内容到剪切板的功能。而 Element Plus 是一个基于 Vue3 的组件库，使用起来也非常方便。

以下是一个实现在 Vue3 + Element Plus 中复制内容到剪切板的示例代码：

<template>
  <div>
    <el-button @click="copyToClipboard">复制内容</el-button>
  </div>
</template>

<script>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';

export default {
  setup() {
    const textToCopy = ref('需要复制的内容');

    const copyToClipboard = () => {
      navigator.clipboard.writeText(textToCopy.value)
        .then(() => {
          ElMessage.success('内容已成功复制到剪贴板');
        })
        .catch((error) => {
          console.error('无法复制内容', error);
          ElMessage.error('无法复制内容');
        });
    }

    return {
      copyToClipboard,
    }
  }
}
</script>

在上面的代码中，我们通过 `ref` 创建了一个响应式数据 `textToCopy`，用于保存需要复制的文本内容。在 `copyToClipboard` 方法中，我们使用 `navigator.clipboard.writeText` 方法将文本内容复制到剪贴板中。如果复制成功，我们使用 Element Plus 的 `ElMessage.success` 方法输出成功消息，否则使用 `ElMessage.error` 方法输出错误消息。

最后，在模板中我们使用 Element Plus 的 `el-button` 组件来实现一个点击按钮，调用 `copyToClipboard` 方法来触发复制操作。