vue3写一个v-copy组件

好的，下面是一个简单的 Vue3 v-copy 组件的实现代码，你可以将其放在一个.vue文件中：

<template>
  <div>
    <button @click="copyToClipboard">{{ buttonText }}</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  name: 'VCopy',
  props: {
    text: {
      type: String,
      required: true
    },
    buttonText: {
      type: String,
      default: 'Copy'
    }
  },
  setup(props) {
    const copied = ref(false);

    const copyToClipboard = () => {
      const el = document.createElement('textarea');
      el.value = props.text;
      document.body.appendChild(el);
      el.select();
      document.execCommand('copy');
      document.body.removeChild(el);
      copied.value = true;
    };

    return {
      copied,
      copyToClipboard
    };
  }
};
</script>

上述代码中，我们引入了Vue3的`ref`函数，用于创建一个响应式的变量。组件接收`text`和`buttonText`两个props，其中`text`是必须的，用于指定需要复制到剪贴板的文本内容。`buttonText`是可选的，用于指定复制按钮的文本，默认为"Copy"。

在组件的`setup`函数中，我们创建了一个名为`copied`的响应式变量，用于记录文本是否已经成功复制到剪贴板。我们还创建了一个名为`copyToClipboard`的函数，该函数会在点击复制按钮时被调用。在该函数中，我们首先创建一个临时的`textarea`元素，并将需要复制的文本内容设置为该元素的`value`属性。然后将该元素添加到`document.body`中，并选中该元素的文本内容。接着使用`document.execCommand('copy')`命令将选中的文本内容复制到剪贴板中。最后将临时创建的`textarea`元素从`document.body`中移除，并将`copied`变量设置为`true`。

在组件的模板中，我们渲染一个按钮，并在按钮上绑定`click`事件。当按钮被点击时，调用`copyToClipboard`函数。我们还在组件模板中使用`copied`变量来显示复制成功的提示信息，当`copied`为`true`时，显示"Text copied to clipboard!"，否则不显示。

这样，我们就完成了一个简单的 Vue3 v-copy 组件的实现。