实现:

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

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

Cannot read properties of undefined (reading 'writeText')

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

copyId=row=>{
let message =`12222222`;
// navigator.clipboard.writeText(message).then(() => {
// this.$message({
// type: "success",
// message: "复制成功!",
// });
// })
if (navigator.clipboard && window.isSecureContext) {
// navigator clipboard 向剪贴板写文本
this.$message.success('复制成功!')
return navigator.clipboard.writeText(message)
} else {
// 创建text area
const textArea = document.createElement('textarea')
textArea.value = message
// 使text area不在viewport,同时设置不可见
document.body.appendChild(textArea)
textArea.focus()
textArea.select()
this.$message.success('复制成功')
return new Promise((res, rej) => {
// 执行复制命令并移除文本框
document.execCommand('copy') ? res() : rej()
textArea.remove()
})
}
},

  

 

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. 关于Git在Visual studio及Git Bush中的日常操作教程,有图有说明,会一直更新本页内容... (Git相对SVN具有更加安全的分布式存储, 分支版本之间切换秒级速度, 分支版本强大灵活等特点)

    >安装命令行和TortoiseGit UI程序. <git bash的安装> https://git-scm.com/downloads <windows可视化工具 Torto ...

  2. [python]《Python编程快速上手:让繁琐工作自动化》学习笔记3

    1. 组织文件笔记(第9章)(代码下载) 1.1 文件与文件路径 通过import shutil调用shutil模块操作目录,shutil模块能够在Python 程序中实现文件复制.移动.改名和删除: ...

  3. cookie设置失败

    有个小项目,本地测试一帆风顺,昨天发布到云服务器后就出问题了 Java端设置的Cookie,浏览器访问不到 1-2022-2-11 设置cookie代码如下 /** * 添加Cookie * @par ...

  4. 使用 Link Cut Tree 维护最小生成树

    简介 本文将简单介绍如何使用 Link Cut Tree 维护动态图最小生成树. 思路 最小生成树的性质:一个基环树的最小生成树,为将环上边权最大的边删除后所组成的树. Proof:如果删除环上的其他 ...

  5. Mybatis理解

    MyBatis学习及理解 1.Mybatis简介 MyBatis是一款优秀的持久层框架,他支持定制化SQL文件.存储过程以及高级映射.避免了JDBC代码和手动设置参数以及获取结果集,Mybatis可以 ...

  6. CSS中的各种格式化上下文-FC(BFC)、IFC、GFC、FFC)

    什么是FC? FC是Formatting Context的缩写,中文名:格式化上下文.是 W3C在CSS2.1 规范中的一个概念. FC是指页面中一篇渲染区域,渲染区域内使用的格式化上下文的渲染规则, ...

  7. 对List集合进行分页

    1 简要说明 有时候,我们有一个list集合,需要对它进行分页处理 下面的根据类MyPageUtilVo就可以做到 它自带泛型,适合各种集合 可以设置每页的大小(默认为10) 根据页码(从1开始)就可 ...

  8. python爬虫学习——列表

    namelist = [] #定义一个空的列表 namelist1 = ["小张","小红","小李"] print(namelist1[0 ...

  9. MQ 消息队列 比较

    为什么需要消息队列 削峰 业务系统在超高并发场景中,由于后端服务来不及同步处理过多.过快的请求,可能导致请求堵塞,严重时可能由于高负荷拖垮Web服务器. 为了能支持最高峰流量,我们通常采取短平快的方式 ...

  10. 学习Java Day10

    今天学习了数组的相关知识