当前位置： 首页 > news >正文

前端一键复制解决方案分享

news 文章来源：https://blog.csdn.net/dfc_dfc/article/details/143030426 2025/5/15 8:08:58
需求背景

在这里插入图片描述

用户需要对流水号进行复制使用，前端的展示是通过样式控制，超出省略号表示，鼠标悬浮展示完整流水号。此处的鼠标悬浮展示采用的是:title=''，这样就无法对文本进行选中。

下面是给出一键复制的不同的解决方案，希望对大家有所帮助。

  1. 使用UI框架中的Popover 弹出框
    如下图所示：

    在这里插入图片描述

    • 优点：
      • 可以直接根据前端工程中使用到的UI库引入使用
    • 缺点：
      • 需要用户手动选中文本进行复制，而且从项目全局考虑，为了样式的一致性可能会造成较大的改动
  2. 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>
  3. 原生JS
    基本用法
    // content：需要复制的内容
const copyToClipboard = (content) => {const textarea = document.createElement("textarea")textarea.value = contentdocument.body.appendChild(textarea)textarea.select()document.execCommand("Copy")textarea.remove()
}
    兼容性

    不同的浏览器或版本对 execCommand 的支持程度不同

  4. 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均存在不兼容的情况。

​

相关文章：

前端一键复制解决方案分享

需求背景 用户需要对流水号进行复制使用&#xff0c;前端的展示是通过样式控制&#xff0c;超出省略号表示&#xff0c;鼠标悬浮展示完整流水号。此处的鼠标悬浮展示采用的是:title&#xff0c;这样就无法对文本进行选中。 下面是给出一键复制的不同的解决方案&#xff0c;希望…...

编程日记 2024/10/21 15:59:45

麒麟操作系统swap使用率过高的排查思路

现象&#xff1a;用户业务环境服务器在运行时&#xff0c;监控平台告警swap使用99%&#xff0c;在系统内查询物理内存使用39%左右&#xff0c;swap使用达99%。 问题排查&#xff1a; 1&#xff09;使用命令查询使用了swap空间的进程并排序&#xff1a;for i in cd /proc;ls |gr…...

编程日记 2024/10/21 15:58:43

爬虫python=豆瓣Top250电影

主流程&#xff1a;获取数据&#xff0c;解析数据&#xff0c;保存数据 from bs4 import BeautifulSoup #网页解析获取数据 import re #正则表达式 import urllib.request,urllib.error #获取网页数据 import sqlite3 #轻量级数据库 import xlwt #进行excel操作 #影视详情…...

编程日记 2024/10/21 15:53:32

【Eclipse系列】解决Eclipse中xxx.properties文件中文乱码问题

问题描述&#xff1a;由于eclipse对Properties资源文件的编码的默认设置是ISO-8859-1&#xff0c;所以在打开.properties文件时&#xff0c;会发现中文乱码了&#xff0c;如图&#xff1a; 解决方法&#xff1a; 1、一次生效法 右击该properties文件–>properties–>Re…...

编程日记 2024/10/21 15:52:29

mysql主从复制及故障修复

一、主MySQL数据库的配置 分别在三台主机&#xff08;chen2/10.110、chen3/10.120、chen4/10.130)中安装mysql数据&#xff0c;其中chen2/10.110作为主MySQL服务器&#xff0c;其余两台作为从MySQL服务器。 1、在主机上部署mysql数据库 详细的请看上一篇&#xff1a;mysql数据…...

编程日记 2024/10/21 15:51:28

基于springboot的网上服装购物商城系统

基于springboot的网上服装购物商城系统 开发语言&#xff1a;Java 框架&#xff1a;springboot JDK版本&#xff1a;JDK1.8 服务器&#xff1a;tomcat7 数据库&#xff1a;mysql 5.7 数据库工具&#xff1a;Navicat11 开发软件&#xff1a;idea 源码获取&#xff1a; &#x…...

编程日记 2024/10/21 15:48:24

aws(学习笔记第六课) AWS的虚拟私有，共有子网以及ACL,定义公网碉堡主机子网以及varnish反向代理

aws(学习笔记第六课) AWS的虚拟私有&#xff0c;共有子网以及ACL&#xff0c;定义公网碉堡主机子网以及varnish反向代理 学习内容&#xff1a; AWS的虚拟私有&#xff0c;共有子网以及ACL定义公网碉堡主机子网&#xff0c;私有子网和共有子网以及varnish反向代理 1. AWS的虚拟…...

编程日记 2024/10/21 15:45:21

接口测试（三）jmeter——连接mysql数据库

一、jmeter安装jdbc 1. 下载插件包&#xff0c;mysql数据库为例&#xff0c;驱动 com.mysql.jdbc.Driver 需要下载 mysql-connector-java-5.1.7-bin.jar 插件包&#xff0c;将插件包放到 jmeter 安装目录下的 lib 目录 2. 给jmeter安装jdbc驱动 二、jmeter操作数据库 1.…...

编程日记 2024/10/21 15:40:15

双十一购物节有哪些好物值得入手？2024双十一好物清单合集分享

一年一度的双十一购物狂欢节即将来临&#xff0c;各大平台纷纷开启预热活动&#xff0c;伴随着品牌的疯狂折扣和满减优惠&#xff0c;众多商品即将迎来超值的价格。现在正是大家“剁手”换新装备的大好时机。作为一名深耕智能产品多年的资深达人&#xff0c;今天这期我将从不同…...

编程日记 2024/10/21 15:39:14

jmeter中请求参数：Parameters、Body Data的区别

使用jmeter发送请求&#xff0c;常常要伴随传递参数。有两种请求参数: Parameters, Body Data, 它们的使用方式有很大不同。 先看下get和post请求的区别。 get请求&#xff1a;顾名思义是从服务器获取资源。 post请求&#xff1a;顾名思义是往服务器提交要处理的数据。 直观…...

编程日记 2024/10/21 15:38:13

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…...

编程日记 2024/10/21 15:37:11

迅为RK3562开发板/核心板240PIN引脚全部引出，产品升级自如

可应用于人脸跟踪、身体跟踪、视频监控、自动语音识别(ASR)、图像分类驾驶员辅助系统(ADAS)、车牌识别、物体识别等。 iTOP-3562开发板/核心板采用瑞芯微RK3562处理器&#xff0c;内部集成了四核A53Mali G52架构&#xff0c;主频2GHZ&#xff0c;内置1TOPSNPU算力&#xff0c;R…...

编程日记 2024/10/21 15:35:07

C++实现顺序栈和链栈操作（实验3--作业）

顺序栈 一、主要功能 实现了顺序栈&#xff08;SqStack&#xff09;的数据结构&#xff0c;并利用该数据结构进行了栈的基本操作以及数制转换的功能。 二、数据结构定义 定义了一些常量&#xff1a; MAXSIZE表示栈的最大长度为 100。OVERFLOw表示存储失败的错误码为 -2。O…...

编程日记 2024/10/21 15:33:05

龙兴物联一体机：设备监测的智能先锋

龙兴物联物联网一体机的崛起 龙兴物联物联网一体机在设备监测领域占据着至关重要的地位。随着科技的不断进步和各行业对设备监测需求的日益增长&#xff0c;龙兴物联物联网一体机以其卓越的性能和广泛的适用性&#xff0c;迅速崛起并成为众多企业和机构的首选。 在当今数字化时…...

编程日记 2024/10/21 15:28:55

KinectDK相机SDK封装Dll出现k4abt_tracker_create()创建追踪器失败的问题

项目场景&#xff1a; KinectDK相机SDK封装Dll 问题描述 在 C 环境下&#xff0c;使用 GPU 模式&#xff08;默认&#xff09;调用 k4abt_tracker_create 函数正常工作。但是&#xff0c;在 Python 环境下&#xff0c;通过 ctypes 调用相同的 DLL&#xff0c;当使用 GPU 模式…...

编程日记 2024/10/21 15:27:54

Linux 命令—— ping、telnet、curl、wget(网络连接相关命令)

文章目录 网络连接相关命令pingtelnetcurlwget 网络连接相关命令 ping ping 命令是用于测试网络连接和诊断网络问题的工具。它通过向目标主机发送 ICMP&#xff08;Internet Control Message Protocol&#xff09;回显请求&#xff0c;并等待回复&#xff0c;以确定目标主机是…...

编程日记 2024/10/21 15:25:52

高速缓冲存储器Cache是如何工作的、主要功能、高速缓冲存储器Cache和主存有哪些区别

1、高速缓冲存储器Cache是如何工作的 高速缓冲存储器Cache的工作主要基于程序和数据访问的局部性原理&#xff0c;其工作方式可以概括为以下几点&#xff1a; 存储近期可能访问的数据和指令&#xff1a;Cache会存储CPU近期可能访问的数据和指令&#xff0c;当CPU需要访问这些…...

编程日记 2024/10/21 15:24:50

极简版Java敏感词检测SDK

敏感词工具 sensitive-word 基于 DFA 算法实现的高性能敏感词工具&#xff0c;开源在GitHub&#xff1a;https://github.com/houbb/sensitive-word。用于敏感词/违禁词/违法词/脏词等的识别和阻拦&#xff0c;是基于 DFA 算法实现的高性能 java 敏感词过滤工具框架。 使用场景…...

编程日记 2024/10/21 15:23:49

H3C路由器交换机操作系统介绍

路由器 路由器的作用 连接具有不同介质的链路连接网络或子网&#xff0c;隔离广播对数据报文执行寻路和转发交换和维护路由信息 H3C 路由器系列 CR系列核心路由器SR系列高端路由器MSR系列路由器ER系列路由器 交换机 交换机的作用 连接多个以太网物理段&#xff0c;隔离冲…...

编程日记 2024/10/21 15:22:48

【项目案例】-音乐播放器-Android前端实现-Java后端实现

精品专题&#xff1a; 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…...

编程日记 2024/10/21 15:21:46

EasyX图形库的安装

前言 EasyX是一个图形库&#xff0c;可以用来做一些c/c小游戏&#xff0c;帮助学习。 一、进入EasyX官网 https://easyx.cn/ 二、点击下载EasyX 三、下载好后以管理员身份运行它 四、点击下一步 五、然后它会自动检测你的编辑器&#xff0c;用哪个就在哪个点安装 六、安装成功…...

编程日记 2024/10/21 15:20:37

数据结构 - 队列

队列也是一种操作受限的线性数据结构&#xff0c;与栈很相似。 01定义 栈的操作受限表现为只允许在队列的一端进行元素插入操作&#xff0c;在队列的另一端只允许删除操作。这一特性可以总结为先进先出&#xff08;First In First Out&#xff0c;简称FIFO&#xff09;。这意味…...

编程日记 2024/10/21 15:19:36

基于springboot美食推荐商城的设计与实现

基于springboot美食推荐商城的设计与实现 开发语言&#xff1a;Java 框架&#xff1a;springboot JDK版本&#xff1a;JDK1.8 服务器&#xff1a;tomcat7 数据库&#xff1a;mysql 5.7 数据库工具&#xff1a;Navicat11 开发软件&#xff1a;idea 源码获取&#xff1a;https:…...

编程日记 2024/10/21 15:18:35

React开发一个WebSocket

export default class SocketService {static instance null;static get Instance() {if (!this.instance) {this.instance new SocketService();}return this.instance;}// 和服务端连接的socket对象ws null;// 存储回调函数callBackMapping {};// 标识是否连接成功connec…...

编程日记 2024/10/21 15:17:33

Oracle DECODE 丢失时间精度的原因与解决方案

在Oracle数据库中&#xff0c;DECODE 函数是一个非常实用的条件处理函数&#xff0c;通常用于替代简单的 CASE WHEN 语句。它根据给定的值列表进行匹配&#xff0c;如果匹配成功则返回相应的值。如果不匹配&#xff0c;返回一个默认值。 问题描述 SELECT DECODE(-21, -1, NU…...

编程日记 2024/10/21 15:13:28

如何用示波器检测次级点火系统（一）

写在最前面&#xff1a; 单看标题可能会让你觉得这篇文章的主题是关于检测线圈&#xff0c;火花塞和火花塞插头电线。但我们指的是分析燃烧室内电子的行为。目标是看燃料混合物&#xff0c;阀座&#xff0c;压缩&#xff0c;积碳和其它影响这种特性的症状。最终目的是要学会分…...

编程日记 2024/10/21 15:10:24

基于SpringBoot+Vue+uniapp的涪陵区特色农产品交易系统的详细设计和实现(源码+lw+部署文档+讲解等)

详细视频演示 请联系我获取更详细的视频演示 项目运行截图 技术框架 后端采用SpringBoot框架 Spring Boot 是一个用于快速开发基于 Spring 框架的应用程序的开源框架。它采用约定大于配置的理念&#xff0c;提供了一套默认的配置&#xff0c;让开发者可以更专注于业务逻辑而不…...

编程日记 2024/10/21 15:09:23

bmp怎么转换为jpg？快速批量将bmp转换为jpg

bmp怎么转换为jpg&#xff1f;在日常的数字生活中&#xff0c;我们时常会遇到各种格式的图片文件&#xff0c;它们各自拥有不同的特点和用途。最近&#xff0c;我遇到了一个有趣的小插曲&#xff1a;我从网络上下载了一张精美的BMP格式图片&#xff0c;打算用它作为一篇报告的背…...

编程日记 2024/10/21 15:08:22

centos8配置java环境变量jdk8u422-b05

1. 下载 JDK 8u422-b05 首先&#xff0c;确保已经下载了 JDK 8u422-b05 的二进制文件。如果还没有下载&#xff0c;你可以去 Oracle 官方网站或者其他可信的源下载 JDK 8u422。 2. 安装 JDK 将下载的 JDK 文件解压到 /usr/local/java 目录下&#xff1a; sudo mkdir /usr/l…...

编程日记 2024/10/21 15:07:20

基于SSM的校园拓展活动管理系统

文未可获取一份本项目的java源码和数据库参考。 1 选题背景 校园文化是精神的载体&#xff0c;是青年成长成才的沃土&#xff0c;是一种体现校园的硬件设施、精神风貌、制度体系、办学理念以及办学特色的综合文化。文明程度高、文化气息浓、活动种类多的校园文化不仅能焕发学校…...

编程日记 2024/10/21 15:06:18