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 的状态改变可以自 ...
随机推荐
- 体验一个前端视图层的mvvm的框架Knockoutjs(双向绑定,模板..)..解放您的双手,不再处理那么多的dom操作..快速实现视图层数据与UI的交互处理
笔者之前对于类似前端展示的,可能都是自己开发js对象,集合外加dom事件进行处理.. 近期看到相关资料,了解了Knockoutjs这个框架,下面来段代码: <script type=" ...
- libcamera 简介
libcamera 简介 libcamera 是一个开源的多媒体库,用于在 Linux 操作系统上支持多种摄像头硬件的访问,libcamera 是一个用户空间库,可用于开发基于摄像头的应用程序,如相机 ...
- [编程基础] Python命令行解析库argparse学习笔记
Python argparse教程展示了如何使用argparse模块解析Python中的命令行参数. 文章目录 1 使用说明 1.1 Python argparse可选参数 1.2 Python ar ...
- Spring Boot 3.0横空出世,快来看看是不是该升级了
目录 简介 对JAVA17和JAVA19的支持 record Text Blocks Switch Expressions instanceof模式匹配 Sealed Classes and Inte ...
- [剑指Offer]3.数组中重复的数字
题目 找出数组中重复的数字. 在一个长度为n的数组中的所有数字都在0~n-1的范围内.数组中某些数字是重复的,但是不知道有几个数字重复了,也不知道每个数字重复了几次.请找出数组中任意一个重复的数组.例 ...
- [cocos2d-x]捕鱼达人鱼和子弹的碰撞检测
检测方法如图所示,步骤在注释中也写的很清楚了.
- Java 进阶P-8.1+P-8.2
捕捉异常 异常的处理方式之一:捕获异常 捕获异常是通过3个关键词来实现的:try-catch-finally.用try来执行一段程序,如果出现异常,系统抛出一个异常,可以通过它的类型来捕捉(catch ...
- drf入门规范、序列化器组件、视图组件、请求与响应
DRF框架之入门规范 本篇文章会详细介绍web开发模式.API接口及其接口测试工具.restful规范.还有经常分不清又很重要的序列化与反序列化的部分,初级交接触APIView.Request类. ...
- Android第六次作业
图片一 用内部存储实现文件写入和读取功能 <?xml version="1.0" encoding="utf-8"?> <LinearLayo ...
- 【HMS Core】使用机器学习服务和搜索服务识别植物
1.介绍 总览 机器学习服务(ML Kit)为开发者提供简单易用.服务多样.技术领先的机器学习能力,助力开发者更快更好地开发各类AI应用.同时,搜索服务(Search Kit)通过端侧SDK和云侧A ...