实现:

 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. Python启动HTTP服务进行文件传输

    有时候局域网共享个东西不方便,尤其在服务器上的时候,总不能先下载下来,再上传上去吧,于是经常在这台机器用python起个http服务,然后去另一台机器直接访问,一来二去,妥试不爽,特进行一下分离 py ...

  2. WebGoat-8.2.2靶场之不安全的反序列化漏洞

    前言 序列化是将变量或对象转换成字符串的过程 反序列化就是把一个对象变成可以传输的字符串,目的就是为了方便传输 而反序列化漏洞就是,假设,我们写了一个class,这个class里面存有一些变量.当这个 ...

  3. 题解CF893C Rumor

    思路 竟然朋友之间可以传递故事,那么,我们设两两有间接或直接的朋友关系的为一个友好集合,那么我们只要每一个友好集合买一次就好了. 那应该怎么买呢?由于题面让我们求的是[最少的价钱],那我们可以考虑每一 ...

  4. Linux C 用GPS时间更新系统时间的方法。

    思路: 1.GPS模块会自动收到带时间信息的消息. GPS模块会收到很多的协议消息带时间信息的.我们选择"$GPRMC"这条协议.其中的时间格式有的是hhmmss(时分秒) 有的是 ...

  5. 關於scanf()的使用

    要使用scanf函數進行輸入: 1.如果用scanf()要輸入讀取基本變量的值,需要加&. 2.如果用scanf()讀取的是把字符串讀入字符數組中,則不需要加& 1 #include& ...

  6. 被iframe页面更改顶层的跳转链接

    界面被其他网页Iframe,需要修改顶层链接---方法如下 <!DOCTYPE html> <html lang="en"> <head> &l ...

  7. Flutter 3.7 新特性:介绍后台isolate通道

    Flutter 3.7 发布,本人对其中后台 isolate 通道比较感兴趣,迫不及待翻译了下Aaron Clarke文章,第一次翻译,有不足地方欢迎各位大佬们评论区指正,我将持续更新到本文,谢谢. ...

  8. vue学习笔记(四)---- 品牌管理案例

    一.导入相关包 <script src="../lib/vue2.6.10.min.js"></script> <script src=". ...

  9. HuggingNews #0210 这周模型有点多,快来看看吧

    每一周,我们的同事都会向社区的成员们发布一些关于 Hugging Face 相关的更新,包括我们的产品和平台更新.社区活动.学习资源和内容更新.开源库和模型更新等,我们将其称之为「Hugging Ne ...

  10. 1 - 【RocketMQ 系列】CentOS 7.6 安装部署RocketMQ

    一.前置准备工作 CentOS 7.6 安装 jdk1.8 openjdk 1.查看JDK版本 yum search java|grep jdk 2.安装jdk1.8,安装默认的目录为: /usr/l ...