实现:

 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. Node.js躬行记(26)——接口拦截和页面回放实验

    最近在研究 Web自动化测试,之前做了些实践,但效果并不理想. 对于 QA 来说,公司的网页交互并不多,用手点点也能满足.对于前端来说,如果要做成自动化,就得维护一堆的脚本. 当然,这些脚本也可以 Q ...

  2. Java基础篇——注解和反射

    注解 注解Annotation可以被其他程序(编译器)读取,常见的有@override 内置注解 @Override 适用于修饰方法,表明重写父类中的一个方法 @Deprecated 用于修饰类.方法 ...

  3. Java基础篇——IO流

    流 内存和存储设备之间传输数据的通道 流的分类 按方向划分 输入流(读):存储设备→内存 输出流(写):内存→存储设备 按单位划分. 字节流:以字节为单位,可以读写所有数据 字符流:以字符为单位,只能 ...

  4. P8881 懂事时理解原神

    简要题意 \(T\) 组数据,每组数据给出一个 \(n\) 个顶点,\(m\) 条边的无向无权图.求出使用下面的伪代码求 \(1\) 为源点的单源最短路答案正确的概率.保留 \(3\) 位小数. in ...

  5. Matplotlib学习笔记1 - 上手制作一些图表吧!

    Matplotlib学习笔记1 - 上手制作一些图表吧! Matplotlib是一个面向Python的,专注于数据可视化的模块. 快速上手 这是使用频率最高的几个模块,在接下来的程序中,都需要把它们作 ...

  6. C#动态创建对象过程

    创建对象环境 获取当前应用程序集引用的类库详细信息,动态类也将调用此类库 obj类为项目动态编译时用到的模版类,主要提取其using信息用于动态生成的类使用     1 AssemblyName[]r ...

  7. 上传图片文件并立即显示到页面使用 javascript实现鼠标拖动画矩形框以及实现固定区域内随意拖动

    首先,你要设计好鼠标事件处理方法,主要是鼠标左键点击,左键释放,还有鼠标移动方法其次,要了解容什么方式,画一个矩形,设计一个方法:DrawRectgle(左上角,右下角),并且要确定当调用这个方法时, ...

  8. python实现通用json导入到mysql

    import json from Db import Db db = Db() ''' 参考配置文件 { "file": "test.json", " ...

  9. 【学习日志】MongoDB为什么选择B树,而MySQL选择B+树实现索引

    先说B树和B+树的区别 B树:非叶子节点也存储数据 B+树:只有叶子节点存储数据,且所有叶子节点通过指针相连接. 为什么MongoDB选择B树而,MySQL选择B+树呢?两种数据结构的区别摆在上面了, ...

  10. springBoot集成flowable

    前言 Flowable可以十分灵活地加入你的应用/服务/构架.可以将JAR形式发布的Flowable库加入应用或服务,来嵌入引擎. 以JAR形式发布使Flowable可以轻易加入任何Java环境:Ja ...