实现:

 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. [OpenCV实战]23 使用OpenCV获取高动态范围成像HDR

    目录 1 背景 1.1 什么是高动态范围(HDR)成像? 1.2 高动态范围(HDR)成像如何工作? 2 代码 2.1 运行环境配置 2.2 读取图像和曝光时间 2.3 图像对齐 2.4 恢复相机响应 ...

  2. C#调用接口的简单流程

    1.编写url地址 string url="http://192.168"; 2.创建http请求对象 HttpWebRequest request = (HttpWebReque ...

  3. BBS项目 未完待续

    项目开发基本流程 1.需求分析 2.架构设计 3.分组开发 4.提交测试 5.交付上线 创建项目配置 环境配置 TEMPLATES = [ { 'BACKEND': 'django.template. ...

  4. [cocos2d-x]用getContentSize()返回的值用CCLOG打印必须用%f

    今天写代码,又遇到了一个bug,开始还以为是我自己哪写错了,没想到竟然在这里出错? 而width和height的类型是float类型,为什么必须用%d打印?接着我查看了一下源码: 如果没理解错的话,C ...

  5. 突如其来的&amp;quot;中断异常&amp;quot;,我(Java)该如何处理?

    # **一.何为异常?** ## 1.生活中的实例 生活中存在许多不正常: 上班路上自行车掉链子 上厕所手机掉马桶 下班回家钥匙丢失 ....... 2.程序中的实例 我们的代码中也许存在许多纰漏,导 ...

  6. 算法之Floyd-Warshall算法【c++】【图论】【最短路】

    我们作为刚学图论的小蒟蒻,先接触到的算法一定是图上最短路径算法.而最短路算法中最简单的当属Floyd-Warshall算法.下面是一些基本介绍: ​该算法可以计算图上任意两点间的最短路径 时间复杂度: ...

  7. 通过Canal将云上MySQL数据同步到华为云ES(CSS)中

    背景: A部门想将mysql中多张表join成一个sql查询语句,然后将结果同步到es中供搜索使用 环境信息: 源端mysql在阿里云上,有公网ip 目标端es在华为云上,三节点 操作步骤与目的: 配 ...

  8. day07-SpringMVC底层机制简单实现-03

    SpringMVC底层机制简单实现-03 https://github.com/liyuelian/springmvc-demo.git 7.任务6-完成控制器方法获取参数-@RequestParam ...

  9. vs2019编写代码时的光标变成了黑块,选中字时替换掉了黑块选中的字的解决方法

    这是由于不小心按到了Insert键 解决方法:再按一下Insert就好了. 因为插入键(insert)是一个状态表示键 当你按倒它时,它会进入一个覆盖模式,在光标位置新输入字会替代原来的字:另一种为插 ...

  10. ES6的新特性有哪些

    1.let.const 2.模板字符串 3.箭头函数 4.解构赋值 5.promise 6.数组的新方法 7.对象的新方法 8.class类 9.新增Set.Map两种数据结构 10.proxy