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

需求背景

在这里插入图片描述

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/453019.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Flink本地安装

去官网下载安装包Index of /apache/flink/flink-1.17.2 进行解压 tar -zxvf /opt/install_packages/flink-1.17.2-bin-scala_2.12.tgz 解压完成后进入flink-1.17目录&#xff0c;执行以下命令启动flink服务 ./bin/start-cluster.sh 执行成功 之后尝试打开flink的webuihttp:/…

qtcreator 仿制vscode黑色背景主题monokai

qtcreator 仿制vscode的monokai黑色主题 1.演示 ​​ ​​ 2.主题配置 ​​ ​​ ​​ ​​ ​​ ​​ ​​ 删掉所有的 把我下面的复制进去 <?xml version"1.0" encoding"UTF-8"?> <style-scheme version"1.0" name&qu…

深入解析大模型RAG:检索、增强与生成的全面指南

RAG&#xff08;Retrieval-Augmented Generation&#xff0c;检索增强生成&#xff09; 是一种结合了信息检索技术与语言生成模型的人工智能技术。该技术通过从外部知识库中检索相关信息&#xff0c;并将其作为提示&#xff08;Prompt&#xff09;输入给大型语言模型&#xff0…

哈工深、微信:“慢思考”超长文档翻译智能体

如今&#xff0c;大语言模型已经成为机器翻译任务&#xff08;Machine Translation&#xff09;上的新型强大工具。 然而&#xff0c;多数在机器翻译大语言模型&#xff08;MT-LLM&#xff09;上开展的研究工作都是句子层面的&#xff0c;每一句话都被独立进行翻译&#xff0c;…

训练VLM(视觉语言模型)的经验

知乎&#xff1a;lym 链接&#xff1a;https://zhuanlan.zhihu.com/p/890327005 如果可以用prompt解决&#xff0c;尽量用prompt解决&#xff0c;因为训练&#xff08;精调&#xff09;的模型往往通用能力会下降&#xff0c;训练和长期部署成本都比较高&#xff0c;这个成本也包…

vScode---配置Pyqt5环境--记录

前提条件&#xff1a; python运行环境已正常安装 1、安装Pyqt5 第三方库下载地址记录&#xff1a; 清华大学&#xff1a;https://pypi.tuna.tsinghua.edu.cn/simple 豆瓣&#xff1a;https://pypi.douban.com/simple 阿里云&#xff1a;https://mirrors.aliyun.com/pypi/simpl…

一文读懂组态图和组态软件,最浅显的解读

一、什么是组态图 组态图是指在工业自动化领域中&#xff0c;用来描述和展示控制系统中各个组件之间关系和工作流程的图形化表示方法。它是一个系统的框架图&#xff0c;通过图形符号和连接线&#xff0c;将各个组件&#xff08;如传感器、执行器、控制器等&#xff09;以及它…

linux ps和kill指令

目录 ps 命令 kill指令&#xff1a; 示例&#xff1a; 补充&#xff1a;管道的概念 管道的概念 管道的用途 示例 在Linux系统中&#xff0c;ps 和 kill 是两个非常常用的命令&#xff0c;用于管理和终止进程。 ps 命令 ps 命令用于显示当前系统中的进程状态。它可以提供…

责任链模式下,解决开闭原则问题实践

前言 在现代软件工程中&#xff0c;设计模式是解决常见问题的有效工具之一。它们吸收了前人的经验&#xff0c;不仅帮助开发者编写更清晰、更可维护的代码&#xff0c;还能促进团队之间的沟通和协作。责任链模式&#xff08;Chain of Responsibility Pattern&#xff09;作为一…

无人机+视频推流直播EasyCVR视频汇聚/EasyDSS平台在森林防护巡检中的解决方案

随着科技的飞速发展&#xff0c;无人机技术在各个领域的应用日益广泛&#xff0c;特别是在森林防护与巡检方面&#xff0c;无人机以其独特的优势&#xff0c;为传统林业管理带来了革命性的变化。本文将探讨无人机在森林防护巡检中的解决方案&#xff0c;分析其工作原理、优势及…

基于SSM+微信小程序的电子点餐管理系统(点餐1)

&#x1f449;文末查看项目功能视频演示获取源码sql脚本视频导入教程视频 1、项目介绍 基于SSM微信小程序的电子点餐管理系统实现了管理员及用户。管理员实现了首页、个人中心、餐品分类管理、特色餐品管理、订单信息管理、用户管理、特价餐品管理、活动订单管理、系统管理。…

【论文学习与撰写】使用endnote工具进行论文参考文献的引用与插入

目录 1、软件的安装 2、放入endnote格式文献 3、endnote里文献管理 4、论文里引用参考文献的插入 5、参考文献的格式转换&#xff0c;及格式的下载 1、软件的安装 关注软件管家&#xff0c;进行下载软件和安装软件 下载通道②百度网盘丨下载链接&#xff1a; https://pa…

js.矩阵置零

链接&#xff1a;73. 矩阵置零 - 力扣&#xff08;LeetCode&#xff09; 题目&#xff1a; 给定一个 m x n 的矩阵&#xff0c;如果一个元素为 0 &#xff0c;则将其所在行和列的所有元素都设为 0 。请使用 原地 算法。 示例 1&#xff1a; 输入&#xff1a;matrix [[1,1,1],…

Flutter 11 Android原生项目集成Flutter Module

本文主要讲解如何在已有的Android原生老项目中集成Flutter模块。 实现流程&#xff1a; 1、在Android原生项目根目录下&#xff0c;创建Flutter Module&#xff1b; 2、修改Android原生项目settings.gradle&#xff0c;绑定 Flutter Module&#xff1b; 3、修改Android原生…

15分钟学Go 第6天:变量与常量

第6天&#xff1a;变量与常量 在Go语言中&#xff0c;变量和常量是编程的基础概念。理解如何定义和使用它们不仅能帮助我们管理数据&#xff0c;还能增强代码的可读性和可维护性。在本章中&#xff0c;我们将详细探讨Go语言中的变量和常量&#xff0c;涵盖它们的定义、使用、作…

[Xshell] Xshell的下载安装使用及连接linux过程 详解(附下载链接)

前言 Xshell.zip 链接&#xff1a;https://pan.quark.cn/s/5d9d1836fafc 提取码&#xff1a;SPn7 安装 下载后解压得到文件 安装路径不要有中文 打开文件 注意&#xff01;360等软件会拦截创建注册表的行为&#xff0c;需要全部允许、同意。或者退出360以后再安装。 在“绿化…

spdlog学习记录

spdlog Loggers&#xff1a;是 Spdlog 最基本的组件&#xff0c;负责记录日志消息。在 Spdlog 中&#xff0c;一个 Logger 对象代表着一个日志记录器&#xff0c;应用程序可以使用 Logger 对象记录不同级别的日志消息Sinks&#xff1a;决定了日志消息的输出位置。在 Spdlog 中&…

程序员节的故事:在代码的海洋中遨游

#1024程序员节 | 征文# 一年一度的程序员节又来了&#xff0c;作为一名热爱编程的开发者&#xff0c;我总是期待着这个特殊的日子。10月24日&#xff0c;不仅是程序员们的节日&#xff0c;更是我们分享故事、交流技术的时刻。今年的1024征文活动让我感到无比兴奋&#xff0c;因…

Axure重要元件三——中继器修改数据

亲爱的小伙伴&#xff0c;在您浏览之前&#xff0c;烦请关注一下&#xff0c;在此深表感谢&#xff01; 课程主题&#xff1a;中继器修改数据 主要内容&#xff1a;显示编辑内容、表格赋值、修改数据 应用场景&#xff1a;更新行、表单数据行修改 案例展示&#xff1a; 正文…

STM32L031F6P6基于CubeMX的串口通信调试笔记

用CubeMX创建项目 本实例用的PA14、PA13两个引脚&#xff0c;LPUART1。 对串口参数进行设置&#xff1a; 开启串口中断&#xff1a; 时钟源设置成内部高频时钟&#xff1a; 对项目进行设置&#xff1a; 生成代码&#xff1a; 在串口初始化函数中加入 __HAL_UART_ENA…