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

复制所绑定元素文本的vue自定义指令

news 来源：原创 2025/9/18 7:14:04

最近写了一个复制所绑定元素文本的vue自定义指令，给大家分享一下。

import { ElMessage } from 'element-plus'// data-* 属性名
const dataCopyBtnTextAttribute = 'data-copy-btn-text'
// 复制按钮的class，结合项目实际进行设置
const copyBtnClass = 'icon-copy'// 复制文本的方法
const copyText = data => {const input = document.createElement('input')input.setAttribute('readonly', 'readonly')input.setAttribute('value', data)input.style.position = 'absolute'input.style.left = '-100px'input.style.top = '-100px'input.style.opacity = '0'document.body.appendChild(input)input.select()document.execCommand('copy')setTimeout(() => {document.body.removeChild(input)})
}// 设置 data-* 属性
function setSign(el) {el.setAttribute(dataCopyBtnTextAttribute, el.innerText)
}// 移除 data-* 属性
function removeSign(el) {el.removeAttribute(dataCopyBtnTextAttribute)
}// 获取 data-* 属性
function getSign(el){return el.getAttribute(dataCopyBtnTextAttribute)
}// 生成复制按钮
function getCopyBtn(el){const iDom = document.createElement('i')iDom.className = `iconfont ${copyBtnClass}`Object.assign(iDom.style,{color:'blue',cursor:'pointer',marginLeft:'4px'})// 添加点击事件 iDom.addEventListener('click',() => {copyText(el.innerText)ElMessage({message: '复制成功',type: 'success',duration:1000})}) return iDom
}// 添加复制按钮
function addCopyBtn(el){// 当节点内容发生变化时，移除复制按钮，当复制的文本有值时，重新添加复制按钮if(getSign(el) !== el.innerText){removeCopyBtn(el)if(!!el.innerText){el.appendChild(getCopyBtn(el))setSign(el)}}
}// 移除复制按钮
function removeCopyBtn(el){removeSign(el)var copyBtns = el.querySelectorAll(`.${copyBtnClass}`);copyBtns.forEach((element) => {el.removeChild(element)element = null})
}export default {mounted(el, binding) {addCopyBtn(el)},updated(el, binding) {addCopyBtn(el)},beforeUnmount(el, binding){removeCopyBtn(el)}
}

复制所绑定元素文本的vue自定义指令

最近写了一个复制所绑定元素文本的vue自定义指令，给大家分享一下。 import { ElMessage } from element-plus// data-* 属性名 const dataCopyBtnTextAttribute data-copy-btn-text // 复制按钮的class，结合项目实际进行设置 const copyBtnClass icon…...

编程日记 2025/9/18 7:14:04

若依-@Excel新增注解numberFormat

Excel注解中原本的scale会四舍五入小数，导致进度丢失想要的效果显示的时候保留两个小数真正的数值是保留之前的数值还原过程若以中有一個專門的工具类，用来处理excel的找到EXCEL导出方法exportExcel()找到writeSheet,写表格的方法找到填充数据的方法…...

编程日记 2025/9/13 19:45:09

内容中台重构智能服务：人工智能技术驱动精准决策

内容概要现代企业数字化转型进程中，内容中台与人工智能技术的深度融合正在重构智能服务的基础架构。通过整合自然语言处理、知识图谱构建与深度学习算法三大技术模块，该架构实现了从数据采集到决策输出的全链路智能化。在数据层，系统可对接…...

编程日记 2025/9/18 7:08:57

网络安全：DeepSeek已经在自动的挖掘漏洞

大家好，我是AI拉呱，一个专注于人工智领域与网络安全方面的博主，现任资深算法研究员一职，兼职硕士研究生导师；热爱机器学习和深度学习算法应用，深耕大语言模型微调、量化、私域部署。曾获多次获得AI竞赛大奖，拥有多项发明专利和学术论文。对于AI算法有自己独特见解和经验…...

编程日记 2025/9/18 7:07:29

C#从入门到精通（34）—如何防止winform程序被同时打开多次

前言： 大家好，我是上位机马工，硕士毕业4年年入40万，目前在一家自动化公司担任软件经理，从事C#上位机软件开发8年以上！我们在开发上位机软件的过程中，评判一个人软件写的好不好，有一…...

编程日记 2025/9/18 7:11:56

Linux系统使用Docker部署Geoserver并做数据挂载进行地图服务的发布和游览

文章目录 1、前提环境2、拉取geoserver镜像3、创建数据挂载目录4、运行容器5、测试使用（发布shp数据为服务）5.1、创建工作区5.2、添加数据存储5.3、发布图层5.4、服务游览 1、前提环境部署环境：Linux，Centos7 ，Doc…...

编程日记 2025/9/14 8:12:36

STM32-温湿度上传OneNET项目

一、项目需求使用 ESP8266 连接 OneNET 云平台，并通过 MQTT 协议上传 DHT11 获取的温湿度值。二、项目框图三、DHT11工作原理参考于良许嵌入式手把手教你玩转DHT11（原理驱动） | 良许嵌入式 3.1 正常工作验证 # 上电后&#xff…...

编程日记 2025/9/14 22:06:33

HTML 中的 Canvas 样式设置全解

在 HTML5 中，<canvas> 元素提供了一个强大的绘图接口，允许开发者通过 JavaScript 实现各种图形和动画效果。为了充分利用 <canvas> 的功能，理解其样式设置是至关重要的。本文将详细介绍如何在 HTML 中设置 <canvas> 的各种…...

编程日记 2025/9/13 15:02:47

【Java】File 类

目录 File 类File 类构造方法常见成员方法判断与获取创建与删除获取并遍历 File 类 File 对象表示一个路径，可以是文件的路径，也可以是文件夹的路径这个路径可以是存在的，也允许是不存在的绝对路径和相对路径的区别： 绝对路径…...

编程日记 2025/9/13 15:02:45

SAP S4HANA Administration (Mark Mergaerts Bert Vanstechelman)

SAP S4HANA Administration (Mark Mergaerts Bert Vanstechelman)...

编程日记 2025/9/13 15:02:44

特征提取：如何从不同模态中获取有效信息？

在多模态学习中，特征提取是一个至关重要的过程。它是将原始数据（如文本、图像、视频和语音等）转化为机器能够理解和处理的特征的核心步骤。不同于传统的单一模态任务，在多模态学习中，如何有效地从每种模态中提取出有意义的信息并进行融合，直接影响到最终模型的性能和准确…...

编程日记 2025/9/16 9:37:23

2025年-G14-Lc88-278.第一个坏版本 -java版

1.题目描述第一个坏版本你是一名产品经理，目前领导一个团队开发新产品。不幸的是，你产品的最新版本未通过质量检查。由于每个版本都是基于前一个版本开发的，所以坏版本之后的所有版本也都是坏的。假设你有 n 个版本 [1, 2, …, n]&#xff…...

编程日记 2025/9/14 20:13:54

计算机网络————（一）HTTP讲解

基础内容分类从TCP/IP协议栈为依托，由上至下、从应用层到基础设施介绍协议。 1.应用层： HTTP/1.1 Websocket HTTP/2.0 2.应用层的安全基础设施 LTS/SSL 3.传输层 TCP 4.网络层及数据链路层 IP层和以太网 HTTP协议网络页面形成基本流程&#xff1a…...

编程日记 2025/9/14 22:21:53

大语言模型架构：从基础到进阶，如何理解和演变

引言你可能听说过像 ChatGPT 这样的 AI 模型，它们能够理解并生成自然语言文本。这些模型的背后有着复杂的架构和技术，但如果你了解这些架构，就能明白它们是如何工作的。今天，我们将用简单的语言，逐步介绍大语言模型的…...

编程日记 2025/9/15 9:52:48

科普mfc100.dll丢失怎么办？有没有简单的方法修复mfc100.dll文件

当电脑频繁弹窗提示“mfc100.dll丢失”或应用程序突然闪退时，这个看似普通的系统文件已成为影响用户体验的核心痛点。作为微软基础类库（MFC）的核心组件，mfc100.dll直接关联着Visual Studio 2010开发的大量软件运行命脉。从工业设计…...

编程日记 2025/9/15 18:47:09

什么是虚拟内存？它的作用是什么？

虚拟内存概念虚拟内存是计算机系统内存管理的一种技术。它使得应用程序认为它拥有连续的可用的内存（一个连续完整的地址空间）。但是实际上，它通常是被分隔成多个物理内存碎片，还有部分暂时存储在外部磁盘存储器上，在…...

编程日记 2025/9/13 15:02:33

SAP任命Simon Davies为亚太区总裁，领导重组后的亚太地区业务

2025年2月19日，SAP宣布任命Simon Davies为新任亚太区总裁，负责领导公司重组后的亚太地区业务。Davies将常驻新加坡，全面负责SAP在亚太地区的战略、运营、人员管理、销售、服务、合作伙伴关系及盈利能力。他的职责范围涵盖韩国、澳大利亚、新西…...

编程日记 2025/9/15 21:16:12

Markdown使用方法文字版解读

[TOC](这里写自定义目录标题) # Markdown编辑器你好！ 这是你第一次使用 **Markdown编辑器** 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。 ## 新的改变我们对Markdown编辑器进行了…...

编程日记 2025/9/13 15:02:29

QT移植，交叉编译至泰山派RK3566开发板，.pro文件解析

备注交叉编译到开发板，会有各种奇奇怪怪的问题，直接命令行安装 QTCREATOR和 QtBase，就在板子上搞个桌面系统编译，最后把桌面关掉。配置文件解析配置文件丢这里，后面有空整理下。说下大概的注意点，安装路径(qtcreator远程部署的路径)、动态库路径和…...

编程日记 2025/9/13 14:10:13

Liunx（CentOS-6-x86_64）系统安装MySql（5.6.50）

一：安装Liunx（CentOS-6-x86_64） 安装Liunx（CentOS-6-x86_64） 二：下载MySql（5.6.50） MySql下载官网二：安装MySql 2.1 将mysql上传到Liunx 文件地址 /usr/local/ 2…...

编程日记 2025/9/13 15:02:25

使用 deepseek实现 go语言，读取文本文件的功能，要求支持 ascii，utf-8 等多种格式自适应

使用 deepseek实现 go语言，读取文本文件的功能，要求支持 ascii，utf-8 等多种格式自适应我要用 chatgpt，也问过，但是比 deepseek 还是差一个级别，具体如下： package mainimport ("bufio&qu…...

编程日记 2025/9/13 15:02:23

当电脑上有几个python版本Vscode选择特定版本python

查看当前vscode用的python版本命令 Import sys print(sys.version) 修改VSCODE解释器打开 VSCode。按下 CtrlShiftP打开命令面板。输入 Python: Select Interpreter 并选择它。从弹出的列表中选择你安装的 Python 解释器。如果你有多个 Python 版本（例如…...

编程日记 2025/9/14 6:23:50

大一计算机的自学总结：一维差分与等差数列差分

前言差分和前缀和一样，也是很重要的基础算法。一、一维差分 1.内容当给出一个数组，每次操作让数组某个区间上的值全增加，最后要求返回整个数组的结果。若是一次一次去遍历，时间复杂度肯定很难看。差分可以做到在时间复杂度…...

编程日记 2025/9/13 19:45:07

学习dify第一天：整体架构分析

使用marscode AI插件从分析最火的dify开始学习使用ai提速首先安装插件功能快捷键使用这个工具如何学习项目首先学习dify那就先上官网看文档开始从docker构建脚本学起看下docker-compose.yamldify里边服务的组件现在看api和web模块api项目根目录有Makefile文件，用于构建api和w…...

编程日记 2025/9/13 19:45:06

C语言的内存分配：malloc和free

使用库函数分配和管理内存。在运行时，分配更多的内存给程序使用，主要工具是malloc函数，这个函数接受一个参数：所需要要的内存字节数。malloc函数会找到合适的空闲内存块，这样的内存是匿名的，即malloc分配了…...

编程日记 2025/9/13 19:45:04

为什么 JSON 不能序列化 set

为什么 JSON 不能序列化 set JSON（JavaScript Object Notation）作为一种广泛使用的数据交换格式，虽然功能强大，但它无法直接序列化 set 类型。本文将从设计原理、实现限制和实际应用角度，探讨这一现象的原因及解决方案…...

编程日记 2025/9/13 19:45:02

XUnity.AutoTranslator-Gemini——调用Google的Gemini API，实现Unity游戏中日文文本的自动翻译

XunityAutoTranslator-Gemini-API 本项目是一个使用 Flask 框架和 Google Gemini GenAI 模型构建的 Web API 服务，用于将日文unity游戏文本翻译成简体中文。日文游戏文本AI翻译API (基于Google Gemini) 本项目是一个使用 Flask 框架和 Google Gemini GenAI 模型…...

编程日记 2025/9/13 19:45:00

深刻理解构件生产线

我们可以将构件生产线类比为软件开发中的一种高效、模块化的构建方式。下面，我将结合Java编程的概念来详细讲解构件生产线的含义和实现方式。一、构件生产线的概念构件生产线在软件开发中，类似于工厂中的自动化生产线，它通过将复杂的软件…...

编程日记 2025/9/13 19:44:58

nlp 自然语言处理+bert model +问答系统 question answer system(python 完整代码)

pre-trained bert model 预训练好的Bert模型本地实现问答系统用这条命令将bert下载到本地： model.save_pretrained("path/to/model") 也有参考这篇文章 https://colab.research.google.com/drive/1uSlWtJdZmLrI3FCNIlUHFxwAJiSu2J0-#scrollTo=AaweLnNXGhTY …...

编程日记 2025/9/13 19:44:56

【Excel】【VBA】根据内容调整打印区域

Excel VBA：自动调整打印区域的实用代码解析在Excel中，我们经常需要调整打印区域。今天介绍一段VBA代码，它可以根据C列的内容自动调整打印区域。 Dim ws As Worksheet Dim lastRow As Long Dim r As Long 设置当前工作表 Set ws ActiveSh…...

编程日记 2025/9/15 0:53:19

【读书笔记·VLSI电路设计方法解密】问题53：什么是逻辑综合

逻辑综合是将期望的电路行为的抽象形式（通常以RTL表示）转换为基于逻辑门（标准单元）的设计实现的过程。这一过程由具有复杂算法的自动综合工具完成。逻辑综合的结果是网表，它由各种标准单元和特殊宏单元组成。该网表的功…...

编程日记 2025/9/13 19:44:53

Redis 的备份机制

Redis 的备份机制 Redis 是一个高性能的基于内存的键值存储数据库，虽然所有操作都在内存中完成，但 Redis 也提供了持久化机制来确保数据的可靠性和可恢复性。这主要通过 RDB 和 AOF 两种备份机制实现。 RDB（Redis Database Backup&#xff…...

编程日记 2025/9/13 19:44:51

CountDownlatch实现原理

文章目录类图及概要核心方法await() 方法await(long timeout, TimeUnit unit) 方法countDown() 方法getCount() 方法总结类图及概要 CountDownLatch 内部有个计数器，并且这个计数器是递减的。下面就通过源码看看 JDK 开发组在何时初始化计数器，在何…...

编程日记 2025/9/14 20:49:45

如何为自己的 PDF 文件添加密码？在线加密 PDF 文件其实更简单

随着信息泄露和数据安全问题的日益突出，保护敏感信息变得尤为重要。加密 PDF 文件是一种有效的手段，可以确保只有授权用户才能访问或修改文档内容。本文将详细介绍如何使用 CleverPDF 在线工具为你的 PDF 文件添加密码保护，确保其安全性。为…...

编程日记 2025/9/13 19:44:47

现代未来派品牌海报徽标设计无衬线英文字体安装包 THANKS LAB

THANK LAB 是一种高级未来主义的软字体，将时尚的现代设计与光滑圆润的边缘相结合，营造出大胆而平易近人的美感。这款字体非常适合品牌、海报、标题、UI/UX 和科幻主题项目，旨在激发创造力。THANK LAB Futuristic Soft Font 完全支持拉丁字母、…...

编程日记 2025/9/15 14:59:32

基于Flask框架的食谱数据可视化分析系统的设计与实现

【Flask】基于Flask框架的食谱数据可视化分析系统的设计与实现 （完整系统源码开发笔记详细部署教程）✅ 目录一、项目简介二、项目界面展示三、项目视频展示一、项目简介在当今数字化时代，信息可视化已成为一种高效的数据理解和传播手段。…...

编程日记 2025/9/16 5:10:18

Mac arm架构使用 Yarn 全局安装 Vue CLI

dgqdgqdeMacBook-Pro spid-admin % vue --version zsh: command not found: vue要使用 Yarn 安装 Vue CLI，你可以执行以下命令： yarn global add vue/cli这个命令会全局安装 Vue CLI，让你可以使用 vue 命令创建、管理 Vue.js 项目。以下是一…...

编程日记 2025/9/17 20:52:47

矩阵-旋转图像

旋转图像给定一个 n n 的二维矩阵 matrix 表示一个图像。请你将图像顺时针旋转 90 度。你必须在原地旋转图像，这意味着你需要直接修改输入的二维矩阵。请不要使用另一个矩阵来旋转图像。输入：二维数组输出：void 思路：tempM…...

编程日记 2025/9/14 22:16:21

自用开发的商标和工作小工具！

近日普推知产老杨把个人小站改了版，也把以前业余开发的小工具做了下优化和增加了一些新的小工具，这些在线小工具手机和电脑双适应，普推老杨日常也在用，主要在商标方面和内容制做。商标名称图样免费生成主要用在可以生成符合商标申…...

编程日记 2025/9/13 19:44:40

基于腾讯云大模型知识引擎×DeepSeek构建八字、六爻赛博算卦娱乐应用

引言随着DeepSeek的火爆，其强大的思维链让不少人越用越香，由于其缜密的思维和推理能力，不少人开发出了不少花里胡哨的玩法，其中一种就是以八字、六爻为代表的玄学文化正以“赛博玄学”的新形态席卷年轻群体。针对于八字、六爻…...

编程日记 2025/9/13 19:44:38

八股文实战之JUC:静态方法的锁和普通方法的锁

1、对于staic同步方法锁住的是class类模板（Class对象） 对象是线程（调用者） 调用者只有获取资源的锁才能调用 2、普通同步方法锁住的资源是class对象对象是线程（调用者）即： 静态同步方法&a…...

编程日记 2025/9/14 9:29:31

VTK知识学习（42）-基本的图形操作（三）

1、网格平滑 1）概述现代扫描技术的发展使得获取点云数据不再困难，通过曲面重建技术可以获取表面网格来表示各种复杂的实体。但是点云数据中往往存在噪声，这样得到的重建网格通常都需要进行平滑处理。拉普拉斯平滑是一种常用的网格…...

编程日记 2025/9/13 19:44:35

代码随想录算法训练营day40（补0208）

买卖股票专栏 1.买卖股票最佳时机贪心法，好想题目 121. 买卖股票的最佳时机给定一个数组 prices ，它的第 i 个元素 prices[i] 表示一支给定股票第 i 天的价格。你只能选择某一天买入这只股票，并选择在未来的某一个不同的日子卖…...

编程日记 2025/9/13 19:44:33

python基于深度学习实现遮挡人脸识别系统的详细方案

以下是一个基于深度学习实现遮挡人脸识别系统的详细方案，使用Python语言：一、需求理解遮挡人脸识别系统旨在准确识别出即使面部部分被遮挡（如口罩、眼镜等）的人的身份。该系统将利用深度学习技术，结合合适的数据集进行训练，以达到较高的识别准确率。二、系统架构 …...

编程日记 2025/9/13 19:44:31

【Python爬虫(43)】云端探秘：Python分布式爬虫部署攻略

【Python爬虫】专栏简介：本专栏是 Python 爬虫领域的集大成之作，共 100 章节。从 Python 基础语法、爬虫入门知识讲起，深入探讨反爬虫、多线程、分布式等进阶技术。以大量实例为支撑，覆盖网页、图片、音频等各类数据爬取&#xff…...

编程日记 2025/9/15 12:43:23

Java集合框架大师课：从青铜到王者的数据结构指南（一）

🚀 Java集合框架大师课：从青铜到王者的数据结构指南（一） 🌟 系列定位：全网最懂小白的JCF实战教程 | 建议搭配IDE边学边练 🎯 学习路线图第一章：初识JCF江湖 1.1 什么是JCF&#xf…...

编程日记 2025/9/13 19:44:27

Vmware虚拟机Ubantu安装Docker、k8s、kuboard

准备工作: 切换用户：su root关闭防火墙: sudo ufw diasble关闭swap: systemctl stop swap.target systemctl status swap.target systemctl disable swap.target #开机禁用 systemctl stop swap.img.swap systemctl status swap.img.swap关闭虚拟交换分区 vim /…...

编程日记 2025/9/15 18:23:10

Java面试——Tomcat

优质博文：IT_BLOG_CN 一、Tomcat 顶层架构 Tomcat中最顶层的容器是Server，代表着整个服务器，从上图中可以看出，一个Server可以包含至少一个Service，用于具体提供服务。Service主要包含两个部分：Connector和…...

编程日记 2025/9/13 18:26:52

游戏引擎学习第113天

仓库:https://gitee.com/mrxiao_com/2d_game_2 黑板：优化的基本过程在游戏编程中，优化是一个非常重要的学习内容，尤其是想要成为专业开发者时。优化的核心是理解代码的执行速度，以及如何提升其性能。在这个阶段，已经…...

编程日记 2025/9/13 7:44:45

【EB-02】TC397 Tresos 最小工程配置

TC397 Tresos 最小工程配置 1. 新建demo 工程2. 配置消除错误2.1 ResourceM 设置2.2 McalLib模块配置3. 生成代码3.1 校验工程3.2 生成代码1. 新建demo 工程新建工程设置工程名称选择芯片型号选择添加模块得到最小工程需求模块 2. 配置消除错误 2.1 ResourceM 设置设置芯…...

编程日记 2025/9/15 18:12:26

相关文章：