vue 点击复制文本

在Vue中，你可以使用不同的方法来实现点击复制文本的功能。引用\[1\]中的代码展示了一个使用`this.$copyText()`方法进行复制的例子。你可以在点击事件中调用该方法来复制文本。例如：

<button @click="copyText">点击复制文本</button>

methods: {
  copyText() {
    const text = "要复制的文本";
    this.$copyText(text).then(() => {
      this.$toast('复制成功！');
    }).catch(() => {
      this.$toast('复制失败！');
    });
  }
}

另外，引用\[2\]中的代码展示了一个使用`data-clipboard-text`属性和插件的例子。你可以在按钮上添加`data-clipboard-text`属性，并在点击事件中调用插件的复制方法来复制文本。例如：

<button class="tag-read" data-clipboard-text="要复制的文本" @click="copyText">点击复制文本</button>

methods: {
  copyText() {
    this.$copyText("要复制的文本").then(() => {
      this.$toast('复制成功！');
    }).catch(() => {
      this.$toast('复制失败！');
    });
  }
}

还有一种方法是使用原生的JavaScript来复制文本。引用\[3\]中展示了两种原生复制文本的方法。你可以根据需要选择其中一种方法来实现点击复制文本的功能。例如：

<span class="number">{{value}}</span>
<span class="copy" @click="copyText(value)">复制</span>

methods: {
  copyText(value) {
    const text = document.querySelector(".number");
    let range = document.createRange();
    range.selectNodeContents(text);
    let selection = document.getSelection();
    selection.removeAllRanges();
    selection.addRange(range);
    document.execCommand("Copy");
    this.$toast("复制成功");
  }
}

希望这些例子能帮助你实现在Vue中点击复制文本的功能。
#### 引用[.reference_title]
- *1* *3* [功能:Vue如何实现点击复制功能](https://blog.csdn.net/weixin_47434590/article/details/128239982)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* [vue点击复制按钮 复制文本](https://blog.csdn.net/weixin_53981442/article/details/127651022)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]