实现:

 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. [常用工具] 深度学习Caffe处理工具

    目录 1 Caffe数据集txt文本制作 2 jpg图像完整性检测 3 图像随机移动复制 4 图像尺寸统计 5 图像名字后缀重命名 6 两文件夹文件比对 7 绘制caffe模型的ROC曲线(二分类) ...

  2. (Java)设计模式:结构型

    前言 这篇博文续接的是 UML建模.设计原则.创建型设计模式.行为型设计模式,有兴趣的可以看一下 3.3.结构型 这些设计模式关注类和对象的组合.将类和对象组合在一起,从而形成更大的结构 * 3.3. ...

  3. Miller_Rabin质数测试

    数论 Miller_Rabin质数测试 作用 当需要判断一个数字是否是质数时,又发现数字过大,\(0(\sqrt n)\)难以承受的时候,就可以使用Miller_Rabin质数测试 基本定理 定理一, ...

  4. angular--连接服务获取数据并展示到页面加载结束禁用按钮-分页加载-管道使用

  5. 分布式协议与算法-Raft算法

    本文总结自:极客时间韩健老师的分布式协议与算法实战课程. 大家都知道,Raft算法属于Multi-Paxos算法,它是在Multi-Paxos思想的基础上,做了一些简化和限制.关于Paxos算法,博主 ...

  6. TS不能将类型“any[]”分配给类型“never[]”

    一.问题 在处理接口返回的数据,赋值给store中的数组时,报类型错误 data:{ cateList: [] } const getCateList = async () => { const ...

  7. 编程哲学之 C# 篇:005——"Hello,World!"

    如第一章说明,程序员的创造能力最接近于神,那么从现在开始,让我们来开始愉快地创造世界吧! 用解决方案来管理我们的创作 运行我们安装好的Visual Studio(以后一般情况下都会简称为VS),如下图 ...

  8. SpringBoot Test Junit 联用

    需要导入SpringBoot test和junit的包 @RunWith(SpringRunner.class) @SpringBootTest(classes = PiYuApplication.c ...

  9. 视觉SLAM:滑动窗口

    1.SLAM问题 1.1建模 考虑某个状态 \(\xi\),以及一次与该变量相关的观测 \(r_{i}\).由于噪声存在,观测服从概率分布 \(p(r_{i}|\xi)\).多个观测时,各个测量值相互 ...

  10. Mybatis的缓存与动态SQL

    Mybatis的缓存 缓存也是为了减少java应用与数据库的交互次数,提升程序的效率 一级缓存 自带一级缓存,并且无法关闭,一直存在,存储在SqlSession中 使用同一个sqlsession进行查 ...