vue 如何实现点击复制？

最新推荐文章于 2025-08-07 11:36:36 发布

她说她一如既往的爱我

最新推荐文章于 2025-08-07 11:36:36 发布

阅读量411

点赞数 4

CC 4.0 BY-SA版权

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_62980497/article/details/137159539

本文介绍了如何在Vue项目中使用JavaScript的ClipboardAPI（如navigator.clipboard.writeText）以及document.execCommand(copy)方法来实现在网页上复制文本的功能。作者通过创建临时textarea元素，设置值并选中文本，展示了如何处理异步复制操作并处理可能的错误。

js用 copy

vue呢？

使用navigator.clipboard.writeText()。如果用户授予了相应的权限，就能提供系统的读写访问。在 Web 应用程序中，Clipboard API 可用于实现剪切、复制和粘贴功能。Clipboard API方法是异步的，返回一个promise对象。

这里需要给一个元素绑定事件

2.使用document.execCommand('copy')方法

使用document。execcmmand（copy）

这样的一个方法

通过创建一个textarea元素，将要复制的文本设置成textarea的value，然后将其添加到文档中，选中文本使用document.execCommand('copy')方法进行复制，最后将textarea元素移除

export default {
  data() {
    return {
      textToCopy: '要复制的文本'
    }
  },
  methods: {
    copyToClipboard() {
      // 创建一个textarea元素
      const textarea = document.createElement('textarea');
      // 设置textarea的值为要复制的文本
      textarea.value = this.textToCopy;
      // 将textarea添加到文档中
      document.body.appendChild(textarea);
      // 选中textarea中的文本
      textarea.select();
      try {
        // 尝试复制选中的文本
        const successful = document.execCommand('copy');
        const msg = successful ? '复制成功' : '复制失败';
        console.log(msg);
      } catch (err) {
        console.log('不能使用这种方法复制', err);
      }
      // 将textarea从文档中移除
      document.body.removeChild(textarea);
    }
  }
}
}

document.execCommand('copy')方法