脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue将文字复制到剪贴板

vue如何将文字复制到剪贴板

 更新时间：2026年03月18日 10:02:04   作者：诸葛博仌  
这篇文章主要介绍了vue如何将文字复制到剪贴板的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vue将文字复制到剪贴板

1、在需要复制的文本元素上添加一个点击事件

例如：

@click=“copyText”

2、在 Vue 实例的 methods 中

添加一个名为 copyText 的方法，用于实现复制功能。

3、在 copyText 方法中

使用 document.execCommand(‘copy’) 命令将文本复制到剪贴板。

示例代码：

<template>
  <div>
    <button @click="copyText">复制文本</button>
    <p ref="textToCopy" @click="copyText">这是需要复制的文本</p>
  </div>
</template>

<script>
export default {
  methods: {
    copyText() {
      //获取需要复制的文本内容。
      const text = this.$refs.textToCopy.innerText;
      // 创建一个临时的 textarea 元素。
      const el = document.createElement('textarea');
      // 将需要复制的文本内容赋值给 textarea 元素。
      el.value = text;
      //将 textarea 元素添加到页面中。
      document.body.appendChild(el);
      //选中 textarea 元素中的文本。
      el.select();
      // 执行复制命令，将选中的文本复制到剪贴板
      document.execCommand('copy');
      //从页面中移除 textarea 元素。
      document.body.removeChild(el);
      //弹出提示框，告知用户文本已复制成功。
      alert('文本已复制');
    },
  },
};
</script>

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

最新评论