Vue/html中点击复制到剪贴板
1.使用JQ实现复制功能
html
<div class="tran_one tran_yi"><div class="form-group"><textarea>文本</textarea></div><div class="form-group tran_group"><div class="tran_flex tran_left tran_copy tran_copy_one"><p>复制</p></div></div></div></div><div class="tran_one tran_two"><div class="form-group"><textarea></textarea></div><div class="form-group tran_group"><div class="tran_flex tran_left tran_copy tran_copy_two"><p>复制</p></div></div></div>
jq 封装后
function copyToClipboard(selector, alertText) {// 获取指定选择器下的复制板块var $copyBlock = $(selector);// 获取textarea元素var $textarea = $copyBlock.find('textarea');// 复制内容到剪贴板if ($textarea.length > 0) {$textarea.select();document.execCommand('copy');// 显示复制成功的提示信息var $alert = $('<div class="copyAlert">' + (alertText || '复制成功') + '</div>');$copyBlock.append($alert);setTimeout(function () {$alert.fadeOut(function () {$(this).remove();});}, 3000);}}$('.tran_copy').click(function () {copyToClipboard($(this).closest('.tran_one'));});$('.tran_copy_two').click(function () {copyToClipboard($(this).closest('.tran_two'));});
2.使用Vue实现复制功能
html
<div class="tran_one tran_yi"><div class="form-group"><textarea>{{mainTransContent}}</textarea></div><div class="form-group tran_group"><div class="tran_flex tran_left tran_copy tran_copy_one"@click="handleTranslateModalCopy(mainTransContent)"><p>复制</p></div></div></div>
创建了一个隐藏的textarea元素,并将需要复制的内容赋值给它,然后通过document.execCommand('copy')执行复制命令
copyToClipboard(text) {const textarea = document.createElement('textarea');textarea.style.position = 'fixed';textarea.style.top = 0;textarea.style.left = 0;textarea.style.width = '1px';textarea.style.height = '1px';textarea.style.padding = 0;textarea.style.border = 'none';textarea.style.outline = 'none';textarea.style.boxShadow = 'none';textarea.style.background = 'transparent';textarea.value = text;document.body.appendChild(textarea);textarea.select();try {const successful = document.execCommand('copy');if (successful) {this.$message({message: '内容已成功复制到剪贴板!',type: 'success',});} else {console.log('复制失败');}} catch (err) {console.log('复制失败:', err);}document.body.removeChild(textarea);},
相关文章:
Vue/html中点击复制到剪贴板
1.使用JQ实现复制功能 html <div class"tran_one tran_yi"><div class"form-group"><textarea>文本</textarea></div><div class"form-group tran_group"><div class"tran_flex tran_left tran_co…...
MtfLive直播导航PHP源码,附带系统搭建教程
将自动采集斗鱼、虎牙、触手、YY、章鱼、电视直播按分类/关键词聚合,用户选择分类,可以观看到全网该关键词下正在直播的内容。 特点 PC站和H5移动站自适应 自动缓存,避免频繁抓取数据 自定义抓取采集规则,同时支持HTML和JSON …...
day19 初始HTML
什么是HTML HTML(Hyper Text Markup Language)超文本标记语言 超文本包括:文字、图片、音频、视频、动画等 HTML5,提供了一些新的元素和一些有趣的新特性,同时也建立了一些新的规则。这些元素、特性和规则的建立&…...
从编程中理解:退一步海阔天空
编程中,“退一步海阔天空”的理念指的是在面对问题时,有时过于纠结于细节或局部优化,反而会陷入困境。这时,如果能暂时放下手中的具体工作,从更高的层面或者换个角度来审视整个系统的设计和架构,可能会发现…...
【前沿技术杂谈:开源软件】引领技术创新与商业模式的革命
【前沿技术杂谈:开源软件】引领技术创新与商业模式的革命 开源软件如何推动技术创新开源软件的开放性和协作精神促进知识共享和技术迭代推动关键技术的发展开源软件与新技术的融合 开源软件的商业模式开源软件的商业模式将开源软件与商业软件相结合 开源软件的安全风…...
c# datatable 通过反射转成泛型list
在C#中,可以使用反射来将DataTable转换为泛型列表。下面是一个示例代码,展示了如何使用反射来实现这个转换过程: using System; using System.Collections.Generic; using System.Data;public class DataConverter {public List<T> Co…...
如何保证MySQL数据一致性
在当今大数据时代,数据库系统扮演着至关重要的角色,而MySQL作为一种流行的关系型数据库管理系统,在数据一致性方面拥有着丰富的机制和技术。下面简单的探讨MySQL是如何保证数据一致性的。 事务与ACID特性 要了解MySQL如何保证数据一致性&am…...
Android学习之路(27) ProGuard,混淆,R8优化
前言 使用java编写的源代码编译后生成了对于的class文件,但是class文件是一个非常标准的文件,市面上很多软件都可以对class文件进行反编译,为了我们app的安全性,就需要使用到Android代码混淆这一功能。 针对 Java 的混淆&#x…...
进程中线程使用率偏高问题排查
1. top命令查看CPU使用率高的进程 2. top -H -p 15931(进程PID) 查看进程下的线程 3. printf "%x\n" 17503(线程PID) 线程PID 10进制转16进制 0x445f 4. jstack -l 15931(JVM进程PID) 导出java进程栈信息,里面包含线程nid0x445f和所在的类࿰…...
【JavaEE进阶】 图书管理系统开发日记——肆
文章目录 🍃前言🎍约定前后端交互接⼝🍀服务器代码实现🚩控制层🚩业务层🚩数据层 🌴前端代码的修改⭕总结 🍃前言 今天我们来实现修改图书模块 首先我们先来看一下,需要…...
STM32--USART串口(1)串口协议
一、通信接口 全双工:通信双方能够同时进行双向通信; 半双工:通信双方能够进行双向通信,但不能同时通信; 单工:只能从一个设备到另一个设备; 同步:接收方可以在时钟信号的指引下进…...
单臂路由实验(华为)
思科设备参考: 单臂路由实验(思科) 一,实验目的 在路由器的一个接口上通过配置子接口的方式,实现相互隔离的不同vlan之间互通。 二,设备配置 Switch1 <Huawei>sys [Huawei]vlan batch 10 20…...
websocket编写聊天室
【黑马程序员】WebSocket打造在线聊天室【配套资料源码】 总时长 02:45:00 共6P 此文章包含第1p-第p6的内容 简介 温馨提示:现在都是第三方支持聊天,如极光,学这个用于自己项目完全没问题,大项目不建议使用 需求分析 代码...
【论文解读】Collaboration Helps Camera Overtake LiDAR in 3D Detection
CoCa3D 摘要引言Collaborative Camera-Only 3D DetectionCollaborative depth estimationCollaborative detection feature learning 实验结论和局限 摘要 与基于 LiDAR 的检测系统相比,仅相机 3D 检测提供了一种经济的解决方案,具有简单的配置来定位 3…...
【Python实战】Python多线程批量采集图片
前言 本文来介绍如何多线程采集图片,多线程效率更快,但是,我们单一IP请求过于频繁,可能会被反爬,被封IP,所以,我们就要用到IP代理池,这里,我给大家推荐一个,可…...
【JavaEE spring】SpringBoot 统一功能处理
SpringBoot 统一功能处理 1. 拦截器1.1 拦截器快速⼊⻔1.2 拦截器详解1.2.1 拦截路径1.2.2 拦截器执⾏流程 1.3 登录校验1.3.1 定义拦截器1.3.2 注册配置拦截器 2. 统⼀数据返回格式2.1 快速⼊⻔2.2 存在问题2.3 案例代码修改2.4 优点 3. 统⼀异常处理 1. 拦截器 后端程序根据…...
小猪o2o生活通系统更新到了v24.1版本了php文件开源了提供VUE了但是车牌识别功能你真得会用吗
一.车牌识别设置项 车牌识别设置项总开关:系统后台-社区管理-社区配置-车牌识别配置。 平台需要开启车牌识别功能,其次平台可以选择车牌识别功能是由平台配置还是小区自己配置有需要提供代码的可以Q我昵称注明:CSDN网友。如果是平台自己配置&…...
Servlet+Ajax实现对数据的列表展示(极简入门)
目录 1.准备工作 1.数据库源(这里以Mysql为例) 2.映射实体类 3.模拟三层架构(Dao、Service、Controller) Dao接口 Dao实现 Service实现(这里省略Service接口) Controller层(或叫Servlet层…...
汽车租赁系统
目录 一.研究背景 二.系统架构 1、SSM 2、JAVA 3、MySQL 4、系统架构 三.系统功能 1、车辆管理 2、客户管理 3、销售管理 4、统计分析 四.系统实现 五.结论总结 一.研究背景 传统的销售与信息统计管理都主要依靠人工,处理出的销售数据量与使用管理系统…...
随笔:回家过年
每一年的年底,伴随着气温的降低,大家开始逐渐增加了返乡的热情。风雪、堵车阻挡不住从各大一线城市归家的思绪。 这种年底大迁徙是中国人对家的执着。有钱没钱回家过年。随着年龄的增加,回家其实是只是做回孩子。脱下了城市里的正装ÿ…...
基于FPGA的PID算法学习———实现PID比例控制算法
基于FPGA的PID算法学习 前言一、PID算法分析二、PID仿真分析1. PID代码2.PI代码3.P代码4.顶层5.测试文件6.仿真波形 总结 前言 学习内容:参考网站: PID算法控制 PID即:Proportional(比例)、Integral(积分&…...
iPhone密码忘记了办?iPhoneUnlocker,iPhone解锁工具Aiseesoft iPhone Unlocker 高级注册版分享
平时用 iPhone 的时候,难免会碰到解锁的麻烦事。比如密码忘了、人脸识别 / 指纹识别突然不灵,或者买了二手 iPhone 却被原来的 iCloud 账号锁住,这时候就需要靠谱的解锁工具来帮忙了。Aiseesoft iPhone Unlocker 就是专门解决这些问题的软件&…...
Cloudflare 从 Nginx 到 Pingora:性能、效率与安全的全面升级
在互联网的快速发展中,高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司,近期做出了一个重大技术决策:弃用长期使用的 Nginx,转而采用其内部开发…...
Spring AI 入门:Java 开发者的生成式 AI 实践之路
一、Spring AI 简介 在人工智能技术快速迭代的今天,Spring AI 作为 Spring 生态系统的新生力量,正在成为 Java 开发者拥抱生成式 AI 的最佳选择。该框架通过模块化设计实现了与主流 AI 服务(如 OpenAI、Anthropic)的无缝对接&…...
Java多线程实现之Thread类深度解析
Java多线程实现之Thread类深度解析 一、多线程基础概念1.1 什么是线程1.2 多线程的优势1.3 Java多线程模型 二、Thread类的基本结构与构造函数2.1 Thread类的继承关系2.2 构造函数 三、创建和启动线程3.1 继承Thread类创建线程3.2 实现Runnable接口创建线程 四、Thread类的核心…...
HubSpot推出与ChatGPT的深度集成引发兴奋与担忧
上周三,HubSpot宣布已构建与ChatGPT的深度集成,这一消息在HubSpot用户和营销技术观察者中引发了极大的兴奋,但同时也存在一些关于数据安全的担忧。 许多网络声音声称,这对SaaS应用程序和人工智能而言是一场范式转变。 但向任何技…...
Spring Security 认证流程——补充
一、认证流程概述 Spring Security 的认证流程基于 过滤器链(Filter Chain),核心组件包括 UsernamePasswordAuthenticationFilter、AuthenticationManager、UserDetailsService 等。整个流程可分为以下步骤: 用户提交登录请求拦…...
【WebSocket】SpringBoot项目中使用WebSocket
1. 导入坐标 如果springboot父工程没有加入websocket的起步依赖,添加它的坐标的时候需要带上版本号。 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId> </dep…...
【Linux】Linux安装并配置RabbitMQ
目录 1. 安装 Erlang 2. 安装 RabbitMQ 2.1.添加 RabbitMQ 仓库 2.2.安装 RabbitMQ 3.配置 3.1.启动和管理服务 4. 访问管理界面 5.安装问题 6.修改密码 7.修改端口 7.1.找到文件 7.2.修改文件 1. 安装 Erlang 由于 RabbitMQ 是用 Erlang 编写的,需要先安…...
PH热榜 | 2025-06-08
1. Thiings 标语:一套超过1900个免费AI生成的3D图标集合 介绍:Thiings是一个不断扩展的免费AI生成3D图标库,目前已有超过1900个图标。你可以按照主题浏览,生成自己的图标,或者下载整个图标集。所有图标都可以在个人或…...
