实现:

 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. C/C++语言 MD5例子

    之前研究了一下在C中进行MD5加密,由于找了很久没有找到现成的库文件,所以所幸自己去写了一下.个人感觉C的便捷性没有Python好的原因就是这里. 下面是我写的一个例子. mian.cpp: 点击查看 ...

  2. [OpenCV实战]32 使用OpenCV进行非真实感渲染

    目录 1 保边滤波的频域变换 1.1 保边滤波器Edge Preserving Filter 1.1.1 函数调用 1.1.2 edgePreservingFilter结果 1.2 细节增强 1.3 ...

  3. IT编程相关内容汇总 - 进阶者系列 - 学习者系列文章

    笔者工作了十多年了,对于技术也有一定的经验,但是IT编程技术的更新是挺快的,特别是各种框架,各种中间件啥的都涌现出来了.这篇博文笔者打算将IT编程的前端.后端.数据库和移动端做一个博文知识汇总,让阅读 ...

  4. jQuery烟花效果

    1.依赖源码 (function($){$.fn.fireworks=function(options){options=options||{};options.opacity=options.opa ...

  5. Vue ElementUI 修改MessageBox 弹框样式

    1.情景还原 <template> <el-button type="text" @click="open">点击打开 Message ...

  6. Docker安装与卸载(基本命令)

    Dockers的安装搭建 参考: https://www.cnblogs.com/jxxiaocao/p/12069139.html 采用apt源安装Docker的其他组件时,新组件与已安装的Dock ...

  7. ADC-单通道DMA到多通道DMA ADC采集修改事项

    1. 使能通道IO,因为从单通道到多通道,需要添加规则转换通道数,故需要使能扫描模式,否则只能扫描第一个通道: 2. DMA模式配置需修改为循环传输模式,否则只转换一次: 3. 开启ADC规则转换通道 ...

  8. Linux07-常用命令-权限

    1.组 1.1基本说明 在linux中的每个用户必须属于一个组,不能独立于组外.在linux中每个文件有所有者.所在组.其它组的概念. 1) 文件所有者 谁创建的这个文件,文件的所有者就是谁 2) 文 ...

  9. Vue框架:6、Vue组件间通信,动态组件,插槽,计算属性,监听属性

    目录 前端开发之Vue框架 一.Vue组件间通信 1.组件间通讯父传子 2.组件间通讯子传父 3.ref属性 二.动态组件 1.不使用动态组件 2.使用动态组件 3.keep-alive保持组件不销毁 ...

  10. 修改ctags让fzf.vim插件显示C,C++方法声明的标签

    背景 在 vim 中使用 fzf.vim 插件可以进行方便的搜索文件, 源码TAG, GIT 记录等, 最近抽空看了下 BTags 命令在 c, c++ 文件中, 无法显示头文件中的函数声明 标签问题 ...