vue 如何实现点击复制?

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元素移除

java 复制代码
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')方法

相关推荐
浏览器API调用工程师_Taylor3 分钟前
日报自动化实战:告别手动复制粘贴
前端·javascript·node.js
晴殇i8 分钟前
JavaScript还能这样写?!ES2025新语法让代码优雅到极致
前端·javascript·程序员
夜晚中的人海15 分钟前
【C++】位运算算法习题
开发语言·c++·算法
浏览器API调用工程师_Taylor18 分钟前
我是如何将手动的日报自动化的☺️☺️☺️
前端·javascript·爬虫
裸奔在上海23 分钟前
使用Java做URL短连接还原长链接获取参数
java·开发语言·程序人生·spring
爱吃烤鸡翅的酸菜鱼23 分钟前
如何掌握【Java】 IO/NIO设计模式?工厂/适配器/装饰器/观察者模式全解析
java·开发语言·后端·设计模式·nio
程序员大雄学编程42 分钟前
「用Python来学微积分」17. 导数与导函数
开发语言·python·数学·微积分
东哥很忙XH42 分钟前
flutter开发的音乐搜索app
android·javascript·flutter
扶尔魔ocy44 分钟前
【QT常用技术讲解】可拖拽文件的Widget--QListWidget
开发语言·qt
枫叶丹41 小时前
【Qt开发】布局管理器(一)-> QVBoxLayout垂直布局
开发语言·c++·qt