复制按钮功能用vue怎么写

在Vue.js中实现复制按钮的功能，你可以通过HTML、JS和Vue的事件监听机制来完成。下面是一个简单的例子：

首先，在模板（template）部分，创建一个复制按钮元素：

<button @click="copyText">复制</button>
<input type="text" v-model="textToCopy" :value="originalText" readonly>

这里我们有一个输入框`<input>`用于显示文本，一个点击事件`@click`触发复制函数，`v-model`绑定到组件的数据属性`textToCopy`。

接下来，在Vue实例的script部分编写`copyText`方法和数据`originalText`：

export default {
  data() {
    return {
      originalText: '这是要复制的文字', // 或者从服务器获取的数据
    };
  },
  methods: {
    copyText() {
      const input = document.createElement('input');
      input.value = this.textToCopy; // 使用当前模型的数据
      document.body.appendChild(input); // 添加到DOM中临时处理
      input.select(); // 选中文本
      document.execCommand('copy'); // 执行复制操作
      document.body.removeChild(input); // 移除临时元素
      alert('复制成功！');
    }
  }
};

这个`copyText`方法会将`textToCopy`的内容复制到剪贴板。当用户点击复制按钮时，会看到提示框告知是否复制成功。