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')方法

相关推荐
versatile_zpc14 分钟前
C++初阶:类和对象(上)
开发语言·c++
尘浮生15 分钟前
Java项目实战II基于微信小程序的移动学习平台的设计与实现(开发文档+数据库+源码)
java·开发语言·数据库·spring boot·学习·微信小程序·小程序
Dread_lxy1 小时前
vue 依赖注入(Provide、Inject )和混入(mixins)
前端·javascript·vue.js
娅娅梨1 小时前
C++ 错题本--not found for architecture x86_64 问题
开发语言·c++
汤米粥1 小时前
小皮PHP连接数据库提示could not find driver
开发语言·php
冰淇淋烤布蕾1 小时前
EasyExcel使用
java·开发语言·excel
拾荒的小海螺1 小时前
JAVA:探索 EasyExcel 的技术指南
java·开发语言
涔溪2 小时前
Ecmascript(ES)标准
前端·elasticsearch·ecmascript
马剑威(威哥爱编程)2 小时前
哇喔!20种单例模式的实现与变异总结
java·开发语言·单例模式
白-胖-子2 小时前
【蓝桥等考C++真题】蓝桥杯等级考试C++组第13级L13真题原题(含答案)-统计数字
开发语言·c++·算法·蓝桥杯·等考·13级