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 的状态改变可以自 ...
随机推荐
- Python启动HTTP服务进行文件传输
有时候局域网共享个东西不方便,尤其在服务器上的时候,总不能先下载下来,再上传上去吧,于是经常在这台机器用python起个http服务,然后去另一台机器直接访问,一来二去,妥试不爽,特进行一下分离 py ...
- WebGoat-8.2.2靶场之不安全的反序列化漏洞
前言 序列化是将变量或对象转换成字符串的过程 反序列化就是把一个对象变成可以传输的字符串,目的就是为了方便传输 而反序列化漏洞就是,假设,我们写了一个class,这个class里面存有一些变量.当这个 ...
- 题解CF893C Rumor
思路 竟然朋友之间可以传递故事,那么,我们设两两有间接或直接的朋友关系的为一个友好集合,那么我们只要每一个友好集合买一次就好了. 那应该怎么买呢?由于题面让我们求的是[最少的价钱],那我们可以考虑每一 ...
- Linux C 用GPS时间更新系统时间的方法。
思路: 1.GPS模块会自动收到带时间信息的消息. GPS模块会收到很多的协议消息带时间信息的.我们选择"$GPRMC"这条协议.其中的时间格式有的是hhmmss(时分秒) 有的是 ...
- 關於scanf()的使用
要使用scanf函數進行輸入: 1.如果用scanf()要輸入讀取基本變量的值,需要加&. 2.如果用scanf()讀取的是把字符串讀入字符數組中,則不需要加& 1 #include& ...
- 被iframe页面更改顶层的跳转链接
界面被其他网页Iframe,需要修改顶层链接---方法如下 <!DOCTYPE html> <html lang="en"> <head> &l ...
- Flutter 3.7 新特性:介绍后台isolate通道
Flutter 3.7 发布,本人对其中后台 isolate 通道比较感兴趣,迫不及待翻译了下Aaron Clarke文章,第一次翻译,有不足地方欢迎各位大佬们评论区指正,我将持续更新到本文,谢谢. ...
- vue学习笔记(四)---- 品牌管理案例
一.导入相关包 <script src="../lib/vue2.6.10.min.js"></script> <script src=". ...
- HuggingNews #0210 这周模型有点多,快来看看吧
每一周,我们的同事都会向社区的成员们发布一些关于 Hugging Face 相关的更新,包括我们的产品和平台更新.社区活动.学习资源和内容更新.开源库和模型更新等,我们将其称之为「Hugging Ne ...
- 1 - 【RocketMQ 系列】CentOS 7.6 安装部署RocketMQ
一.前置准备工作 CentOS 7.6 安装 jdk1.8 openjdk 1.查看JDK版本 yum search java|grep jdk 2.安装jdk1.8,安装默认的目录为: /usr/l ...