vue 复制功能

实现:
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 复制功能的更多相关文章
- 一键复制功能 - Vue
经常遇到一键复制功能,简单记录一下.这里使用的是clipboard插件:https://clipboardjs.com/ 第一步 安装:npm install clipboard --save 第二步 ...
- Vue中结合clipboard实现复制功能
首先现在Vue中引入clipboard npm install clipboard --save 在需要使用的组件中import 引入clipboard import Clipboard from ' ...
- vue点击复制功能
复制功能,选中复制或者点击复制(不使用插件的情况下) 1.选中复制 这个比点击复制简单点 <template> <div> <el-button type=& ...
- vue实现复制功能(项目使用)
安装依赖 npm install --save vue-clipboard2 用法: import Vue import VueClipboard from 'vue-clipboard2' Vue. ...
- vue 实现一键复制功能(两种方式)
方法 一 : <div class="mask-cont"> <p><input id="input" /></p&g ...
- vue中实现浏览器的复制功能
点击复制,就可以实现copy <p class="inline-block"> <span >{{fenxiao.appSecret}}</span& ...
- h5的复制功能的使用,Clipboard.js的使用,主要是在app里面使用
app中使用,框架用的是vue.js 1.显示要下载这个Clipboard.js插件 package-lock.json里面 "clipboard-polyfill": { &qu ...
- Vue电商后台管理系统项目第1天-基本环境搭建&登录功能
基本环境搭建完成 安装npm包:npm -S i vue vue-router axios element-ui 配置Eslint: 打开设置,搜索Eslint拓展,然后将下面代码覆盖进去即可 { , ...
- VUE实现富文本编辑以及组件传值的使用总结
VUE实现使用富文本编辑,如下图: 实现这个富文本编辑需要以下步骤: 第一步:安装编辑器组件 npm install vue-quill-editor –-save第二步:创建一个Ue.vue的文件, ...
- Vue.js 和 MVVM 小细节
MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...
随机推荐
- APIO2022 游记
Day 0 有人刚登记完房间就把房卡落在房间里了我不说是谁(真不是我,不信去问jth) 下午把gen把模拟赛的题补了一下,T3是个不太可做的虚树上淀粉质dp,先咕着. Day 1 上午来的比较晚,没有 ...
- 《Kubernetes Operator 开发进阶》- 作者絮絮叨
目录 今天聊啥 本书读者 推荐序 推荐序1 - 邓洪超 推荐序2 - 任晶磊 推荐语 推荐语1 - 张磊 推荐语2 - 宋净超 推荐语3 - 王泽锋 推荐语4 - 周鹏飞 推荐语5 - 郑东旭 本书简 ...
- 使用阿里云产品搭建PHPWIND
2.4 安装PhpWind论坛网站 1. 本小节主要是在ECS云主机中快速安装PhpWind论坛网站的基础环境. 2. 远程登录到 PhpWind 主机服务器 ECS实例.请使用本实验 ...
- flutter 2.X报错 Bad state: Insecure HTTP is not allowed by platform:
flutter2.x开发遇到的问题 Bad state: Insecure HTTP is not allowed by platform: 翻译过来就是:错误状态:平台不允许不安全的HTTP: 产生 ...
- BUG日记---运行Tomcat报406错误:根据请求中接收到的主动协商头字段,目标资源没有用户代理可以接受的当前表示,而且服务器不愿意提供缺省表示。
网页报错内容 HTTP Status 406 – 不可接收 Type Status Report 描述 根据请求中接收到的主动协商头字段,目标资源没有用户代理可以接受的当前表示,而且服务器不愿意提供缺 ...
- 模拟BS服务器分析-模拟BS服务器代码实现
模拟BS服务器分析 模拟网站服务器,使用浏览器访问自己编写的服务端程序,查看网页效果. 服务器要给客户端回写一个信息,回写一个html页面(文件)我们需要读取index.html文件,就必须的知道这个 ...
- ElasticSearch分布式搜索引擎——从入门到精通
ES分布式搜索引擎 注意: 在没有创建库的时候搜索,ES会创建一个库并自动创建该字段并且设置为String类型也就是text 什么是elasticsearch? 一个开源的分布式搜索引擎,可以用来实现 ...
- Spring AOP与AspectJ的对比及应用
1 简介 AOP,即面向切面编程是很常用的技术,特别是在Java Web开发中.而最流行的AOP框架分别是Spring AOP和AspectJ. 2 Spring AOP vs AspectJ Spr ...
- you-get下载B站视频
you-get下载B站视频 库存 you-get介绍 https://github.com/soimort/you-get you-get是一个命令行工具,可以下载知名网站的视频 支持的网站有 ht ...
- 数字游戏(NOIP 2003 PJT2)
一 原始数据处理 1.输入数据得到a[1]~a[n],复制扩展a[n+1]~a[2*n],以便处理不同点为起点出发. cin>>n>>m; for(int i=1;i<= ...