前端一键复制解决方案分享
需求背景

用户需要对流水号进行复制使用,前端的展示是通过样式控制,超出省略号表示,鼠标悬浮展示完整流水号。此处的鼠标悬浮展示采用的是:title='',这样就无法对文本进行选中。
下面是给出一键复制的不同的解决方案,希望对大家有所帮助。
-
使用UI框架中的Popover 弹出框
如下图所示:

- 优点:
- 可以直接根据前端工程中使用到的UI库引入使用
- 缺点:
- 需要用户手动选中文本进行复制,而且从项目全局考虑,为了样式的一致性可能会造成较大的改动
- 优点:
-
ClipboardJS
ClipboardJS 是一个轻量级的 JavaScript 库,主要用于实现剪贴板功能,让用户可以方便地复制文本。
使用方法
-
npm 安装
npm install clipboard --save -
引入
import ClipboardJS from 'clipboard' -
样例
<template><el-button type="primary" id="copy-button" @click="oneKeyCopy">一键复制</el-button><div class="container"><input v-model="logJson" /></div> </template><script> import ClipboardJS from 'clipboard'; export default {data() {return {logJson: '哈哈哈',}},methods: {oneKeyCopy() {let clipboard = new ClipboardJS('#copy-button', {text: () => this.logJson,});clipboard.on('success', (e) => {this.$message.success('复制成功!');clipboard.destroy();});clipboard.on('error', () => {this.$message.error('复制失败,请手动复制!');clipboard.destroy();});clipboard.onClick(event => event.preventDefault()); // 阻止默认的点击事件clipboard.click(); // 触发点击事件以执行复制操作clipboard.destroy();},} } </script>
-
-
原生JS
基本用法
// content:需要复制的内容 const copyToClipboard = (content) => {const textarea = document.createElement("textarea")textarea.value = contentdocument.body.appendChild(textarea)textarea.select()document.execCommand("Copy")textarea.remove() }兼容性
不同的浏览器或版本对
execCommand的支持程度不同 -
navigator.clipboard.writeText
navigator.clipboard.writeText是一个现代浏览器提供的 API,用于将文本写入剪贴板。基本用法
<!DOCTYPE html> <html lang="zh"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>复制文本示例</title> </head> <body><textarea id="text-to-copy" rows="4" cols="50">这是需要复制的文本。</textarea><br><button id="copy-button">复制文本</button><script>document.getElementById('copy-button').addEventListener('click', function() {const text = document.getElementById('text-to-copy').value;navigator.clipboard.writeText(text).then(() => {console.log('文本已复制:', text);alert('文本已复制到剪贴板!');}).catch(err => {console.error('复制失败:', err);});});</script> </body> </html>代码解释
- 通过
document.getElementById获取文本域和按钮元素。 - 为按钮添加点击事件监听器。
- 在点击事件中,获取文本域中的值,并调用
navigator.clipboard.writeText(text)。 - 使用
.then()方法处理成功情况,并在控制台输出信息或显示提示。 - 使用
.catch()方法处理错误情况。
兼容性
navigator.clipboard是现代浏览器支持的特性(如 Chrome, Firefox, Edge 等),在某些旧版浏览器中可能不被支持。建议在使用前检查浏览器的兼容性。总结
推荐方案2,方案1的使用需要考虑项目样式的一致性,可能会导致较多的内容改动;方案4和方案3均存在不兼容的情况。
- 通过
相关文章:
前端一键复制解决方案分享
需求背景 用户需要对流水号进行复制使用,前端的展示是通过样式控制,超出省略号表示,鼠标悬浮展示完整流水号。此处的鼠标悬浮展示采用的是:title,这样就无法对文本进行选中。 下面是给出一键复制的不同的解决方案,希望…...
麒麟操作系统swap使用率过高的排查思路
现象:用户业务环境服务器在运行时,监控平台告警swap使用99%,在系统内查询物理内存使用39%左右,swap使用达99%。 问题排查: 1)使用命令查询使用了swap空间的进程并排序:for i in cd /proc;ls |gr…...
爬虫python=豆瓣Top250电影
主流程:获取数据,解析数据,保存数据 from bs4 import BeautifulSoup #网页解析获取数据 import re #正则表达式 import urllib.request,urllib.error #获取网页数据 import sqlite3 #轻量级数据库 import xlwt #进行excel操作 #影视详情…...
【Eclipse系列】解决Eclipse中xxx.properties文件中文乱码问题
问题描述:由于eclipse对Properties资源文件的编码的默认设置是ISO-8859-1,所以在打开.properties文件时,会发现中文乱码了,如图: 解决方法: 1、一次生效法 右击该properties文件–>properties–>Re…...
mysql主从复制及故障修复
一、主MySQL数据库的配置 分别在三台主机(chen2/10.110、chen3/10.120、chen4/10.130)中安装mysql数据,其中chen2/10.110作为主MySQL服务器,其余两台作为从MySQL服务器。 1、在主机上部署mysql数据库 详细的请看上一篇:mysql数据…...
基于springboot的网上服装购物商城系统
基于springboot的网上服装购物商城系统 开发语言:Java 框架:springboot JDK版本:JDK1.8 服务器:tomcat7 数据库:mysql 5.7 数据库工具:Navicat11 开发软件:idea 源码获取: &#x…...
aws(学习笔记第六课) AWS的虚拟私有,共有子网以及ACL,定义公网碉堡主机子网以及varnish反向代理
aws(学习笔记第六课) AWS的虚拟私有,共有子网以及ACL,定义公网碉堡主机子网以及varnish反向代理 学习内容: AWS的虚拟私有,共有子网以及ACL定义公网碉堡主机子网,私有子网和共有子网以及varnish反向代理 1. AWS的虚拟…...
接口测试(三)jmeter——连接mysql数据库
一、jmeter安装jdbc 1. 下载插件包,mysql数据库为例,驱动 com.mysql.jdbc.Driver 需要下载 mysql-connector-java-5.1.7-bin.jar 插件包,将插件包放到 jmeter 安装目录下的 lib 目录 2. 给jmeter安装jdbc驱动 二、jmeter操作数据库 1.…...
双十一购物节有哪些好物值得入手?2024双十一好物清单合集分享
一年一度的双十一购物狂欢节即将来临,各大平台纷纷开启预热活动,伴随着品牌的疯狂折扣和满减优惠,众多商品即将迎来超值的价格。现在正是大家“剁手”换新装备的大好时机。作为一名深耕智能产品多年的资深达人,今天这期我将从不同…...
jmeter中请求参数:Parameters、Body Data的区别
使用jmeter发送请求,常常要伴随传递参数。有两种请求参数: Parameters, Body Data, 它们的使用方式有很大不同。 先看下get和post请求的区别。 get请求:顾名思义是从服务器获取资源。 post请求:顾名思义是往服务器提交要处理的数据。 直观…...
Docker安装ActiveMQ镜像以及通过Java生产消费activemq示例
拉取镜像 docker pull docker.io/webcenter/activemq 启动容器 docker run -d --name myactivemq -p 61616:61616 -p 8162:8161 docker.io/webcenter/activemq:latest 这样就代表启动成功了 浏览器访问 http://localhost:8162/ admin admin 开启验证 修改配置文件/opt/ac…...
迅为RK3562开发板/核心板240PIN引脚全部引出,产品升级自如
可应用于人脸跟踪、身体跟踪、视频监控、自动语音识别(ASR)、图像分类驾驶员辅助系统(ADAS)、车牌识别、物体识别等。 iTOP-3562开发板/核心板采用瑞芯微RK3562处理器,内部集成了四核A53Mali G52架构,主频2GHZ,内置1TOPSNPU算力,R…...
C++实现顺序栈和链栈操作(实验3--作业)
顺序栈 一、主要功能 实现了顺序栈(SqStack)的数据结构,并利用该数据结构进行了栈的基本操作以及数制转换的功能。 二、数据结构定义 定义了一些常量: MAXSIZE表示栈的最大长度为 100。OVERFLOw表示存储失败的错误码为 -2。O…...
龙兴物联一体机:设备监测的智能先锋
龙兴物联物联网一体机的崛起 龙兴物联物联网一体机在设备监测领域占据着至关重要的地位。随着科技的不断进步和各行业对设备监测需求的日益增长,龙兴物联物联网一体机以其卓越的性能和广泛的适用性,迅速崛起并成为众多企业和机构的首选。 在当今数字化时…...
KinectDK相机SDK封装Dll出现k4abt_tracker_create()创建追踪器失败的问题
项目场景: KinectDK相机SDK封装Dll 问题描述 在 C 环境下,使用 GPU 模式(默认)调用 k4abt_tracker_create 函数正常工作。但是,在 Python 环境下,通过 ctypes 调用相同的 DLL,当使用 GPU 模式…...
Linux 命令—— ping、telnet、curl、wget(网络连接相关命令)
文章目录 网络连接相关命令pingtelnetcurlwget 网络连接相关命令 ping ping 命令是用于测试网络连接和诊断网络问题的工具。它通过向目标主机发送 ICMP(Internet Control Message Protocol)回显请求,并等待回复,以确定目标主机是…...
高速缓冲存储器Cache是如何工作的、主要功能、高速缓冲存储器Cache和主存有哪些区别
1、高速缓冲存储器Cache是如何工作的 高速缓冲存储器Cache的工作主要基于程序和数据访问的局部性原理,其工作方式可以概括为以下几点: 存储近期可能访问的数据和指令:Cache会存储CPU近期可能访问的数据和指令,当CPU需要访问这些…...
极简版Java敏感词检测SDK
敏感词工具 sensitive-word 基于 DFA 算法实现的高性能敏感词工具,开源在GitHub:https://github.com/houbb/sensitive-word。用于敏感词/违禁词/违法词/脏词等的识别和阻拦,是基于 DFA 算法实现的高性能 java 敏感词过滤工具框架。 使用场景…...
H3C路由器交换机操作系统介绍
路由器 路由器的作用 连接具有不同介质的链路连接网络或子网,隔离广播对数据报文执行寻路和转发交换和维护路由信息 H3C 路由器系列 CR系列核心路由器SR系列高端路由器MSR系列路由器ER系列路由器 交换机 交换机的作用 连接多个以太网物理段,隔离冲…...
【项目案例】-音乐播放器-Android前端实现-Java后端实现
精品专题: 01.C语言从不挂科到高绩点 https://blog.csdn.net/yueyehuguang/category_12753294.html?spm1001.2014.3001.5482https://blog.csdn.net/yueyehuguang/category_12753294.html?spm1001.2014.3001.5482 02. SpringBoot详细教程 https://blog.csdn.ne…...
XML Group端口详解
在XML数据映射过程中,经常需要对数据进行分组聚合操作。例如,当处理包含多个物料明细的XML文件时,可能需要将相同物料号的明细归为一组,或对相同物料号的数量进行求和计算。传统实现方式通常需要编写脚本代码,增加了开…...
【Axure高保真原型】引导弹窗
今天和大家中分享引导弹窗的原型模板,载入页面后,会显示引导弹窗,适用于引导用户使用页面,点击完成后,会显示下一个引导弹窗,直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...
Qt/C++开发监控GB28181系统/取流协议/同时支持udp/tcp被动/tcp主动
一、前言说明 在2011版本的gb28181协议中,拉取视频流只要求udp方式,从2016开始要求新增支持tcp被动和tcp主动两种方式,udp理论上会丢包的,所以实际使用过程可能会出现画面花屏的情况,而tcp肯定不丢包,起码…...
P3 QT项目----记事本(3.8)
3.8 记事本项目总结 项目源码 1.main.cpp #include "widget.h" #include <QApplication> int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); } 2.widget.cpp #include "widget.h" #include &q…...
vue3 定时器-定义全局方法 vue+ts
1.创建ts文件 路径:src/utils/timer.ts 完整代码: import { onUnmounted } from vuetype TimerCallback (...args: any[]) > voidexport function useGlobalTimer() {const timers: Map<number, NodeJS.Timeout> new Map()// 创建定时器con…...
【HTML-16】深入理解HTML中的块元素与行内元素
HTML元素根据其显示特性可以分为两大类:块元素(Block-level Elements)和行内元素(Inline Elements)。理解这两者的区别对于构建良好的网页布局至关重要。本文将全面解析这两种元素的特性、区别以及实际应用场景。 1. 块元素(Block-level Elements) 1.1 基本特性 …...
【Java学习笔记】BigInteger 和 BigDecimal 类
BigInteger 和 BigDecimal 类 二者共有的常见方法 方法功能add加subtract减multiply乘divide除 注意点:传参类型必须是类对象 一、BigInteger 1. 作用:适合保存比较大的整型数 2. 使用说明 创建BigInteger对象 传入字符串 3. 代码示例 import j…...
Java毕业设计:WML信息查询与后端信息发布系统开发
JAVAWML信息查询与后端信息发布系统实现 一、系统概述 本系统基于Java和WML(无线标记语言)技术开发,实现了移动设备上的信息查询与后端信息发布功能。系统采用B/S架构,服务器端使用Java Servlet处理请求,数据库采用MySQL存储信息࿰…...
【Linux】Linux 系统默认的目录及作用说明
博主介绍:✌全网粉丝23W,CSDN博客专家、Java领域优质创作者,掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域✌ 技术范围:SpringBoot、SpringCloud、Vue、SSM、HTML、Nodejs、Python、MySQL、PostgreSQL、大数据、物…...
比较数据迁移后MySQL数据库和OceanBase数据仓库中的表
设计一个MySQL数据库和OceanBase数据仓库的表数据比较的详细程序流程,两张表是相同的结构,都有整型主键id字段,需要每次从数据库分批取得2000条数据,用于比较,比较操作的同时可以再取2000条数据,等上一次比较完成之后,开始比较,直到比较完所有的数据。比较操作需要比较…...
