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

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

news 2026/4/4 18:14:04
需求背景

在这里插入图片描述

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

OpenClaw浏览器自动化：Qwen3-14b_int4_awq实现智能爬虫

OpenClaw浏览器自动化&#xff1a;Qwen3-14b_int4_awq实现智能爬虫 1. 为什么需要智能爬虫&#xff1f; 上周我需要从几十个电商页面抓取产品参数&#xff0c;传统爬虫遇到三个致命问题&#xff1a;动态加载内容无法解析、反爬机制频繁拦截、非结构化数据难以提取。当我尝试用…...

编程新知 2026/4/4 18:01:51

终极指南：3分钟掌握Silk v3音频转换，彻底解决微信QQ语音播放难题

终极指南&#xff1a;3分钟掌握Silk v3音频转换&#xff0c;彻底解决微信QQ语音播放难题 【免费下载链接】silk-v3-decoder [Skype Silk Codec SDK]Decode silk v3 audio files (like wechat amr, aud files, qq slk files) and convert to other format (like mp3). Batch con…...

编程新知 2026/4/4 17:31:37

把YOLOv8模型部署到边缘：在Jetson Orin Nano上导出ONNX并集成到C++项目的保姆级教程

在Jetson Orin Nano上实现YOLOv8模型的高效C部署实战 边缘计算设备上的AI模型部署一直是工业界关注的焦点。NVIDIA Jetson Orin Nano凭借其强大的AI算力和能效比&#xff0c;成为边缘端部署YOLOv8等目标检测模型的理想平台。本文将深入探讨如何将训练好的YOLOv8模型转换为ONNX格…...

编程新知 2026/4/4 17:25:31

【单片机】STM32晶振引脚不连晶振时的做法

STM32不使用外部晶振时,OSC_IN和 OSC_OUT接法&#xff1a;1、对于100脚或者144脚的产品&#xff0c;OSC_IN应接地&#xff0c;OSC_OUT应悬空&#xff1b;2、对于少于100脚的产品&#xff0c;有两种接法&#xff1a;OSC_IN和OSC_OUT分别通过10K电阻接地&#xff0c;此方法可提高…...

编程新知 2026/4/4 16:08:17

AI绘画进阶：如何利用Stable Diffusion的图片参数反向优化你的提示词

AI绘画进阶&#xff1a;如何利用Stable Diffusion的图片参数反向优化你的提示词 在AI绘画领域&#xff0c;Stable Diffusion已经成为创作者们不可或缺的工具。当你已经能够熟练生成基础图像后&#xff0c;如何进一步提升作品质量&#xff1f;答案可能就藏在那些被忽视的图片参数…...

编程新知 2026/4/4 15:37:38

群晖搭建PS4 HEN服务器 | 无需联网的本地化解决方案

1. 为什么需要本地化HEN服务器&#xff1f; 如果你是一位PS4玩家&#xff0c;可能对HEN&#xff08;Homebrew ENabler&#xff09;这个名词并不陌生。它能让你的PS4运行自制软件、备份游戏存档&#xff0c;甚至解锁一些官方系统限制的功能。但传统方式需要PS4联网访问外部HEN服…...

编程新知 2026/4/4 15:29:35

告别残差加法，Kimi 给神经网络换了个 “智能引擎”

来源&#xff1a;算法进阶 本文约2800字&#xff0c;建议阅读6分钟本文介绍了 Kimi 团队用 Attention Residuals 替代传统残差机制的成果。只要接触深度学习神经网络的读者们对「」一定不会陌生。自从 2015 年 ResNet 诞生以来&#xff0c;这种「将输入直接加到输出上」的简单逻…...

编程新知 2026/4/4 15:17:24

盘点 | 2026顶会顶刊机器人触觉：聚焦五条技术主线

2026年顶会顶刊释放的五大「触觉」关键信号 ——从静态识别到动态闭环 目录 01 元学习赋能机器人触觉识别&#xff0c;精度与泛化性俱佳 ICRA2026 | Tactile Recognition of Both Shapes and Materials with Automatic Feature Optimization-Enabled Meta Learning 研究方…...

编程新知 2026/4/4 14:00:28

IwrQk实战指南：跨平台Iwara视频社区客户端从安装到精通

IwrQk实战指南&#xff1a;跨平台Iwara视频社区客户端从安装到精通 【免费下载链接】iwrqk Unofficial Iwara Flutter Client 项目地址: https://gitcode.com/gh_mirrors/iw/iwrqk IwrQk是一款基于Flutter开发的跨平台Iwara视频社区客户端&#xff0c;专为技术爱好者和普…...

编程新知 2026/4/4 13:42:15

7π/6 与 π/6 的关系

参考角&#xff08;Reference Angle&#xff09;的解释&#xff1a;7π/6 与 π/6 的关系 这在三角函数中非常重要&#xff0c;尤其是计算 sin、cos、tan 等值时。让我一步步解释清楚&#xff0c;特别是为什么 7π/6 的参考角是 π/6&#xff0c;以及它们之间的关系。整个解释…...

编程新知 2026/4/4 12:53:26