实现:

  1. let message =
  2. ` ${name}
  3. 电话:${item.phone}
  4. 部门:${item.department}
  5. 职务: ${item.post}
  6. 邮箱:${item.email}`;
  7. navigator.clipboard.writeText(message).then(() => {
  8. this.$message.success('复制成功')
  9. })

 上面实现的在本地值行没问题,但是在测试环境发布之后会报错:

Cannot read properties of undefined (reading 'writeText')

所以需要兼容下:这个兼容可能还有问题 所以有用插件的 npm install clipboard --save ,等我使用了再来写

  1. copyId=row=>{
  2. let message =`12222222`;
  3. // navigator.clipboard.writeText(message).then(() => {
  4. // this.$message({
  5. // type: "success",
  6. // message: "复制成功!",
  7. // });
  8. // })
  9. if (navigator.clipboard && window.isSecureContext) {
  10. // navigator clipboard 向剪贴板写文本
  11. this.$message.success('复制成功!')
  12. return navigator.clipboard.writeText(message)
  13. } else {
  14. // 创建text area
  15. const textArea = document.createElement('textarea')
  16. textArea.value = message
  17. // 使text area不在viewport,同时设置不可见
  18. document.body.appendChild(textArea)
  19. textArea.focus()
  20. textArea.select()
  21. this.$message.success('复制成功')
  22. return new Promise((res, rej) => {
  23. // 执行复制命令并移除文本框
  24. document.execCommand('copy') ? res() : rej()
  25. textArea.remove()
  26. })
  27. }
  28. },

  

 

vue 复制功能的更多相关文章

  1. 一键复制功能 - Vue

    经常遇到一键复制功能,简单记录一下.这里使用的是clipboard插件:https://clipboardjs.com/ 第一步 安装:npm install clipboard --save 第二步 ...

  2. Vue中结合clipboard实现复制功能

    首先现在Vue中引入clipboard npm install clipboard --save 在需要使用的组件中import 引入clipboard import Clipboard from ' ...

  3. vue点击复制功能

    复制功能,选中复制或者点击复制(不使用插件的情况下) 1.选中复制 这个比点击复制简单点 <template>   <div>     <el-button type=& ...

  4. vue实现复制功能(项目使用)

    安装依赖 npm install --save vue-clipboard2 用法: import Vue import VueClipboard from 'vue-clipboard2' Vue. ...

  5. vue 实现一键复制功能(两种方式)

    方法 一 : <div class="mask-cont"> <p><input id="input" /></p&g ...

  6. vue中实现浏览器的复制功能

    点击复制,就可以实现copy <p class="inline-block"> <span >{{fenxiao.appSecret}}</span& ...

  7. h5的复制功能的使用,Clipboard.js的使用,主要是在app里面使用

    app中使用,框架用的是vue.js 1.显示要下载这个Clipboard.js插件 package-lock.json里面 "clipboard-polyfill": { &qu ...

  8. Vue电商后台管理系统项目第1天-基本环境搭建&登录功能

    基本环境搭建完成 安装npm包:npm -S i vue vue-router axios element-ui 配置Eslint: 打开设置,搜索Eslint拓展,然后将下面代码覆盖进去即可 { , ...

  9. VUE实现富文本编辑以及组件传值的使用总结

    VUE实现使用富文本编辑,如下图: 实现这个富文本编辑需要以下步骤: 第一步:安装编辑器组件 npm install vue-quill-editor –-save第二步:创建一个Ue.vue的文件, ...

  10. Vue.js 和 MVVM 小细节

    MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...

随机推荐

  1. [seaborn] seaborn学习笔记0-seaborn学习笔记章节

    seaborn学习笔记章节 seaborn是一个基于matplotlib的Python数据可视化库.seaborn是matplotlib的高级封装,可以绘制有吸引力且信息丰富的统计图形.相对于matp ...

  2. 光速上手k8s(2023)(containerd)(未完待续)

    又过了好久没写了,主要是近来状况也无聊 一.了解概念(参考) 概念 Kubernetes 是一个可移植.可扩展的开源平台,用于管理容器化的工作负载和服务,可促进声明式配置和自动化. Kubernete ...

  3. SSM框架——MyBatis

    Mybatis 1.Mybatis的使用 1.1给项目导入相关依赖 我这里有几个下载好的依赖包提供给大家 点我下载--junit4.13.2 点我下载--maven3.8.1 点我下载--mybati ...

  4. 基于 .NET7.0 开发Telegram 机器人(入门)

    简介 Telegram(非正式简称TG.电报)是跨平台的即时通信软件,其客户端是自由及开放源代码软件,但服务端是专有软件.用户可以相互交换加密与自毁消息,发送照片.视频等所有类型文件.官方提供手机版( ...

  5. npm 中设置环境NODE_ENV变量,判断失败打印process.env.NODE_ENV确实是"development",但是判断process.env.NODE_ENV === "development" 是false

    通过package.json 的scripts脚本 修改NODE_ENV的值来区分开发环境和生产环境. "scripts": { "build": " ...

  6. 《深入理解Java虚拟机》第三章读书笔记(二)——HotSpot垃圾回收算法实现(OopMap,安全点安全区域,卡表,写屏障,三色标记算法)

    系列文章目录和关于我 前面<深入理解Java虚拟机>第三章读书笔记(一)--垃圾回收算法我们学习了垃圾回收算法理论知识,下面我们关注下HotSpot垃圾回收算法的实现,分为以下几部分 对象 ...

  7. 无需依赖Docker环境制作镜像

    随着高版本的Kubernetes弃用Docker,企业也可以不依赖Docker环境了,但是DevOps通过Kubernetes部署的话,仍然需要制作镜像,那么在没有Docker环境的情况下如何制作呢? ...

  8. OpenMP For Construct dynamic 调度方式实现原理和源码分析

    OpenMP For Construct dynamic 调度方式实现原理和源码分析 前言 在本篇文章当中主要给大家介绍 OpenMp for construct 的实现原理,以及与他相关的动态库函数 ...

  9. MRS_外部库相关问题汇总

    解决问题如下: CH32V307使用IQMath库时 使用MRS时,当使用到math数学库 CH32V307使用IQMath库时 CH32V307是支持硬件浮点的,可以是math.h中的sinf.IQ ...

  10. JWT拦截器与跨域问题

    本文参考: https://blog.csdn.net/csdn_x_w/article/details/108027940 我发现走的都是OPTIONS协议,然后JWT 却把OPTIONS拦截了,于 ...