前言

我们现在看到很多政务系统都有一键复制功能，那如果要用Vue来实现复制功能该怎么做呢？其实我们复制的内容主要分两种，一种是复制输入框的内容，另一种是复制非输入框的内容。今天我们就这两种复制功能分别说一下。

复制输入框的内容

在 Vue 项目中的 input 或 textarea 复制文本，您应该编写一个方法来使用 Vue ref 调用元素的 select() 和 setSelectionRange() 方法。

<!-- 堆代码 duidaima.com-->
Vue.createApp({
  data: () => ({ message: '' }),
  methods: {
    copyText() {
      const element = this.$refs.message;
      element.select();
      element.setSelectionRange(0, 99999);
      document.execCommand('copy');
    }
  },
  template: `
  <div>
    <div>
      <input id="example" v-model="message" ref="message" />
    </div>
    <button @click="copyText()">Click to Copy</button>
    <div>
      <h3>Paste here</h3>
      <div>
        <textarea></textarea>
      </div>
    </div>
  </div>
  `
}).mount('#app');

复制非输入框的内容
要从不是 textarea 或 input 的元素复制文本，您应该使用 document.createElement() 函数创建一个假的 textarea。一旦你创建了一个假的 textarea，你可以将 textarea 的内容设置为你想要使用之前的方法复制的值。然后在复制文本后删除 textarea。

Vue.createApp({
  data: () => ({ message: '' }),
  methods: {
    copyTextNoInput() {
      const storage = document.createElement('textarea');
      storage.value = this.$refs.message.innerHTML;
      this.$refs.reference.appendChild(storage);
      storage.select();
      storage.setSelectionRange(0, 99999);
      document.execCommand('copy');
      this.$refs.reference.removeChild(storage);
    }
  },
  template: `
  <div>
    <div ref="message">This is text that you wish to copy</div>
    <button @click="copyTextNoInput()">Click to Copy</button>
    <div>
      <h3>Paste here</h3>
      <div>
      <textarea></textarea>
      </div>
    </div>
  </div>
  `
}).mount('#app2');

总结：

以上就是用Vue实现的复制功能逻辑代码，如果你们的项目中刚好有类似需求的，可以参考一下。