vue文本框复制功能

在Vue中实现文本框复制功能，可以通过组合使用Vue的指令和方法来完成。通常情况下，我们需要在用户进行某种操作（如点击按钮）时，将文本框中的文本复制到剪贴板中。以下是一个简单的实现方法：

1. 使用`v-model`指令将文本框与Vue实例的data属性绑定，以便获取文本框中的文本。
2. 创建一个方法，该方法中使用`document.execCommand('copy')`来执行复制操作。
3. 在文本框或按钮上使用`v-on:click`指令或简写为`@click`，绑定到上述方法。

示例代码如下：

<template>
  <div>
    <input type="text" v-model="textToCopy" readonly>
    <button @click="copyText">复制</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      textToCopy: '需要复制的文本'
    };
  },
  methods: {
    copyText() {
      let textArea = document.createElement('textarea');
      textArea.value = this.textToCopy;
      document.body.appendChild(textArea);
      textArea.select();
      try {
        let successful = document.execCommand('copy');
        let msg = successful ? '成功复制' : '复制失败';
        this.$message({ type: 'success', message: msg });
      } catch (err) {
        this.$message({ type: 'error', message: '复制功能不可用' });
      }
      document.body.removeChild(textArea);
    }
  }
}
</script>

在上面的代码中，当用户点击复制按钮时，会调用`copyText`方法。该方法创建了一个临时的`textarea`元素，将其值设置为绑定到文本框的`textToCopy`数据，然后选中并复制这个值。复制成功后，会给出相应的提示信息。