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

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

news 2025/7/13 1:04:23
需求背景

在这里插入图片描述

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

铭豹扩展坞 USB转网口 突然无法识别解决方法

当 USB 转网口扩展坞在一台笔记本上无法识别，但在其他电脑上正常工作时，问题通常出在笔记本自身或其与扩展坞的兼容性上。以下是系统化的定位思路和排查步骤，帮助你快速找到故障原因： 背景： 一个M-pard（铭豹）扩展坞的网卡突然无法识别了，扩展出来的三个USB接口正常。…...

编程新知 2025/7/12 6:00:25

Java 语言特性(面试系列2)

一、SQL 基础 1. 复杂查询 &#xff08;1&#xff09;连接查询&#xff08;JOIN&#xff09; 内连接&#xff08;INNER JOIN&#xff09;&#xff1a;返回两表匹配的记录。 SELECT e.name, d.dept_name FROM employees e INNER JOIN departments d ON e.dept_id d.dept_id; 左…...

编程新知 2025/7/12 7:16:15

抖音增长新引擎：品融电商，一站式全案代运营领跑者

抖音增长新引擎&#xff1a;品融电商&#xff0c;一站式全案代运营领跑者 在抖音这个日活超7亿的流量汪洋中&#xff0c;品牌如何破浪前行&#xff1f;自建团队成本高、效果难控&#xff1b;碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...

编程新知 2025/7/12 13:52:29

如何将联系人从 iPhone 转移到 Android

从 iPhone 换到 Android 手机时&#xff0c;你可能需要保留重要的数据&#xff0c;例如通讯录。好在&#xff0c;将通讯录从 iPhone 转移到 Android 手机非常简单&#xff0c;你可以从本文中学习 6 种可靠的方法&#xff0c;确保随时保持连接&#xff0c;不错过任何信息。 第 1…...

编程新知 2025/7/10 14:21:41

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

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

编程新知 2025/7/12 19:11:40

第7篇：中间件全链路监控与 SQL 性能分析实践

7.1 章节导读 在构建数据库中间件的过程中&#xff0c;可观测性 和 性能分析 是保障系统稳定性与可维护性的核心能力。 特别是在复杂分布式场景中&#xff0c;必须做到&#xff1a; &#x1f50d; 追踪每一条 SQL 的生命周期&#xff08;从入口到数据库执行&#xff09;&#…...

编程新知 2025/7/9 10:24:22

django blank 与 null的区别

1.blank blank控制表单验证时是否允许字段为空 2.null null控制数据库层面是否为空 但是&#xff0c;要注意以下几点&#xff1a; Django的表单验证与null无关&#xff1a;null参数控制的是数据库层面字段是否可以为NULL&#xff0c;而blank参数控制的是Django表单验证时字…...

编程新知 2025/7/7 3:34:13

【VLAs篇】02：Impromptu VLA—用于驱动视觉-语言-动作模型的开放权重和开放数据

项目描述论文标题Impromptu VLA&#xff1a;用于驱动视觉-语言-动作模型的开放权重和开放数据 (Impromptu VLA: Open Weights and Open Data for Driving Vision-Language-Action Models)研究问题自动驾驶的视觉-语言-动作 (VLA) 模型在非结构化角落案例场景中表现不佳&#xf…...

编程新知 2025/7/11 18:27:06

CSP信奥赛C++常用系统函数汇总

# CSP信奥赛C常用系统函数汇总## 一、输入输出函数### 1. cin / cout&#xff08;<iostream>&#xff09; cpp int x; cin >> x; // 输入 cout << x << endl;// 输出 优化&#xff1a;ios::sync_with_stdio(false); 可提升速度 2. scanf() /…...

编程新知 2025/6/13 16:06:21

动态生成element-plus的scss变量；SCSS中实现动态颜色变体生成

文章目录 一、动态css变量1.生成内容2.动态生成css变量2.1新增_color-utils.scss&#xff08;不推荐&#xff09;2.2新增_color-utils.scss&#xff08;推荐&#xff09;2.3theme.scss引入使用 一、动态css变量 1.生成内容 在我们修改element-plus主题色时候&#xff0c;会自…...

编程新知 2025/7/11 21:08:44