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

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

news 2026/2/10 16:43:06
需求背景

在这里插入图片描述

用户需要对流水号进行复制使用，前端的展示是通过样式控制，超出省略号表示，鼠标悬浮展示完整流水号。此处的鼠标悬浮展示采用的是: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

XML Group端口详解

在XML数据映射过程中&#xff0c;经常需要对数据进行分组聚合操作。例如&#xff0c;当处理包含多个物料明细的XML文件时&#xff0c;可能需要将相同物料号的明细归为一组&#xff0c;或对相同物料号的数量进行求和计算。传统实现方式通常需要编写脚本代码&#xff0c;增加了开…...

编程新知 2026/2/9 13:51:46

【Axure高保真原型】引导弹窗

今天和大家中分享引导弹窗的原型模板&#xff0c;载入页面后&#xff0c;会显示引导弹窗&#xff0c;适用于引导用户使用页面&#xff0c;点击完成后&#xff0c;会显示下一个引导弹窗&#xff0c;直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...

编程新知 2026/2/8 4:37:29

Qt/C++开发监控GB28181系统/取流协议/同时支持udp/tcp被动/tcp主动

一、前言说明 在2011版本的gb28181协议中&#xff0c;拉取视频流只要求udp方式&#xff0c;从2016开始要求新增支持tcp被动和tcp主动两种方式&#xff0c;udp理论上会丢包的&#xff0c;所以实际使用过程可能会出现画面花屏的情况&#xff0c;而tcp肯定不丢包&#xff0c;起码…...

编程新知 2026/2/5 4:23:49

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

编程新知 2026/2/1 6:56:36

vue3 定时器-定义全局方法 vue+ts

1.创建ts文件 路径&#xff1a;src/utils/timer.ts 完整代码&#xff1a; import { onUnmounted } from vuetype TimerCallback (...args: any[]) > voidexport function useGlobalTimer() {const timers: Map<number, NodeJS.Timeout> new Map()// 创建定时器con…...

编程新知 2025/8/9 0:31:20

【HTML-16】深入理解HTML中的块元素与行内元素

HTML元素根据其显示特性可以分为两大类&#xff1a;块元素(Block-level Elements)和行内元素(Inline Elements)。理解这两者的区别对于构建良好的网页布局至关重要。本文将全面解析这两种元素的特性、区别以及实际应用场景。 1. 块元素(Block-level Elements) 1.1 基本特性 …...

编程新知 2025/11/11 6:28:42

【Java学习笔记】BigInteger 和 BigDecimal 类

BigInteger 和 BigDecimal 类 二者共有的常见方法 方法功能add加subtract减multiply乘divide除 注意点&#xff1a;传参类型必须是类对象 一、BigInteger 1. 作用&#xff1a;适合保存比较大的整型数 2. 使用说明 创建BigInteger对象 传入字符串 3. 代码示例 import j…...

编程新知 2025/11/8 15:39:00

Java毕业设计：WML信息查询与后端信息发布系统开发

JAVAWML信息查询与后端信息发布系统实现 一、系统概述 本系统基于Java和WML(无线标记语言)技术开发&#xff0c;实现了移动设备上的信息查询与后端信息发布功能。系统采用B/S架构&#xff0c;服务器端使用Java Servlet处理请求&#xff0c;数据库采用MySQL存储信息&#xff0…...

编程新知 2025/10/27 13:29:11

【Linux】Linux 系统默认的目录及作用说明

博主介绍&#xff1a;✌全网粉丝23W&#xff0c;CSDN博客专家、Java领域优质创作者&#xff0c;掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域✌ 技术范围&#xff1a;SpringBoot、SpringCloud、Vue、SSM、HTML、Nodejs、Python、MySQL、PostgreSQL、大数据、物…...

编程新知 2026/1/29 2:30:31

比较数据迁移后MySQL数据库和OceanBase数据仓库中的表

设计一个MySQL数据库和OceanBase数据仓库的表数据比较的详细程序流程，两张表是相同的结构，都有整型主键id字段，需要每次从数据库分批取得2000条数据，用于比较，比较操作的同时可以再取2000条数据，等上一次比较完成之后，开始比较，直到比较完所有的数据。比较操作需要比较…...

编程新知 2025/9/14 5:35:46