vue3 按钮复制粘贴功能

1.html

<div  @click="copy(item.envelopePassword)" >  复制口令  </div>

2.utils 创建copy.js

export const copy = (val: string): void => {let { isSuccessRef } = useCopyToClipboard(val) as anyif (isSuccessRef) {// 轻提示showNotify("复制成功");} else {showNotify("复制失败");}
}const useCopyToClipboard = (val: string) => {let isSuccessRef = false;//创建input标签var input = document.createElement("input");//将input的值设置为需要复制的内容input.value = val;//添加input标签document.body.appendChild(input);//选中input标签input.select();//执行复制document.execCommand("copy");if (document.execCommand("copy")) {isSuccessRef = true;} else {isSuccessRef = false;}//移除input标签document.body.removeChild(input);return { isSuccessRef };
}

3.页面用用

import { copy } from '@/utils/copy'

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

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

相关文章

【强化学习的数学原理】课程笔记--3(蒙特卡洛方法)

目录 蒙特卡洛方法MC Basic算法sparse reward MC Greedy 算法样本使用效率MC ϵ \epsilon ϵ-Greedy 算法一些例子 蒙特卡洛方法 第二节 推导贝尔曼最优公式中的&#xff1a; q π k ( s , a ) ∑ r P ( r ∣ s , a ) r γ ∑ s ′ P ( s ′ ∣ s , a ) v π k ( s ′ ) q…

vue3 ~ pinia学习

先看两个图 一个vuex 一个pinia 根据图看出来 pinia更简单了 那么具体怎么操作呢 我们来看下~ 第一步 下载 yarn add pinia # 或者使用 npm npm install pinia 第二步 注册 创建一个 pinia 实例 (根 store) 并将其传递给应用&#xff1a; import { createApp } from v…

代码随想录算法训练Day57|LeetCode200-岛屿数量、LeetCode695-岛屿的最大面积

岛屿数量 题目描述 力扣200-岛屿数量 给你一个由 1&#xff08;陆地&#xff09;和 0&#xff08;水&#xff09;组成的的二维网格&#xff0c;请你计算网格中岛屿的数量。 岛屿总是被水包围&#xff0c;并且每座岛屿只能由水平方向和/或竖直方向上相邻的陆地连接形成。 此…

前端vue后端java使用easyexcel框架下载表格xls数据工具类

一 使用alibaba开源的 easyexcel框架&#xff0c;后台只需一个工具类即可实现下载 后端下载实现 依赖 pom.xml <dependency><groupId>org.apache.poi</groupId><artifactId>poi</artifactId><version>4.1.2</version></dependen…

MATLAB-分类CPO-RF-Adaboost冠豪猪优化器(CPO)优化RF随机森林结合Adaboost分类预测(二分类及多分类)

MATLAB-分类CPO-RF-Adaboost冠豪猪优化器&#xff08;CPO&#xff09;优化RF随机森林结合Adaboost分类预测&#xff08;二分类及多分类&#xff09; 分类CPO-RF-Adaboost冠豪猪优化器&#xff08;CPO&#xff09;优化RF随机森林结合Adaboost分类预测&#xff08;二分类及多分类…

docker 设置代理,通过代理服务器拉取镜像

docker 拉取目标镜像需要通过代理服务器进行时&#xff0c;可以通过为 docker 配置全局代理来实现。 注&#xff1a;Linux 上通过临时命令 export HTTP_PROXY 设置的代理&#xff0c;对 curl 这些有用&#xff0c;但是对 docker pull 不起作用。 示例 假设您的代理服务器地址是…

Nginx目录文件作用

查看文件 [rootlocalhost nginx]# pwd /opt/nginx [rootlocalhost nginx]# ll total 4 drwx------ 2 nobody root 6 Jun 6 09:11 client_body_temp drwxr-xr-x 3 root root 4096 Feb 28 14:30 conf drwx------ 2 nobody root 6 Feb 28 14:29 fastcgi_temp drwxr-xr-x…

【web前端HTML+CSS+JS】--- HTML学习笔记01

学习链接&#xff1a;黑马程序员pink老师前端入门教程&#xff0c;零基础必看的h5(html5)css3移动端前端视频教程_哔哩哔哩_bilibili 学习文档&#xff1a; Web 开发技术 | MDN (mozilla.org) 一、前后端工作流程 WEB模型&#xff1a;前端用于采集和展示信息&#xff0c;中…

Web漏洞扫描工具AppScan与AWVS测评及使用体验

AppScan和AWVS业界知名的Web漏洞扫描工具&#xff0c;你是否也好奇到底哪一个能力更胜一筹呢&#xff1f;接下来跟随博主一探究竟吧。 1. 方案概览 第一步&#xff1a;安装一个用于评测的Web漏洞靶场&#xff08;本文采用最知名和最广泛使用的靶场&#xff0c;即OWASP Benchma…

啥?你没听过SpringBoot的FatJar?

写在最前面&#xff1a; SpringBoot是目前企业里最流行的框架之一&#xff0c;SpringBoot的部署方式多数采用jar包形式。通常&#xff0c;我们使用java -jar便可以直接运行jar文件。普通的jar只包含当前 jar的信息&#xff0c;当内部依赖第三方jar时&#xff0c;直接运行则会报…

robotframework-appiumLibrary 应用 - 实现 app 自动化

1、安装appiumLibrary第三方库 运行pip命令&#xff1a;pip install robotframework-appiumlibrary 若已安装&#xff0c;需要更新版本可以用命令&#xff1a;pip install -U robotframework-appiumlibrary 2、安装app自动化环境。 参考我的另外一篇专门app自动化环境安装的…

设计模式探索:策略模式

1. 什么是策略模式&#xff08;Strategy Pattern&#xff09; 定义 策略模式&#xff08;Strategy Pattern&#xff09;的原始定义是&#xff1a;定义一系列算法&#xff0c;将每一个算法封装起来&#xff0c;并使它们可以相互替换。策略模式让算法可以独立于使用它的客户端而…

打卡第4天----链表

通过学习基础,发现我的基本功还得需要再练练,思路得再更加清晰明了,这样子做算法题才能驾轻就熟。每天记录自己的进步。 一、两两交换 题目编号:24 题目描述: 给你一个链表,两两交换其中相邻的节点,并返回交换后链表的头节点。你必须在不修改节点内部的值的情况下完成本…

[数据结构] 基于交换的排序 冒泡排序快速排序

标题&#xff1a;[数据结构] 基于交换的排序 冒泡排序&&快速排序 水墨不写bug &#xff08;图片来源于网络&#xff09; 目录 &#xff08;一&#xff09;冒泡排序 优化后实现&#xff1a; &#xff08;二&#xff09;快速排序 I、实现方法&#xff1a; &#…

opencv环境搭建-python

最近遇到了一些图像处理的需求&#xff0c;所以需要学习一下opencv,来记录一下我的学习历程。 安装numpy pip install -i https://pypi.tuna.tsinghua.edu.cn/simple numpy安装matplotlib pip install -i https://pypi.tuna.tsinghua.edu.cn/simple matplotlib安装opencv …

ctfshow web入门 web338--web344

web338 原型链污染 comman.js module.exports {copy:copy };function copy(object1, object2){for (let key in object2) {if (key in object2 && key in object1) {copy(object1[key], object2[key])} else {object1[key] object2[key]}}}login.js var express …

【ubuntu】挂载新磁盘

1、查看磁盘 sudo fdisk -l#Disk /dev/sdb: 4.0 TiB #Disk model: HNA641010BCF105 #Units: sectors of 1 * 512 512 bytes #Sector size (logical/physical): 512 bytes / 4096 bytes #I/O size (minimum/optimal): 4096 bytes / 4096 bytes #Disklabel type: gpt #Disk id…

python argparse模块nargs用法

nargs 是 argparse 模块中用来指定参数的数量的属性。不同的 nargs 取值有不同的含义&#xff0c;下面是一些常用的用法&#xff1a; nargsNone (默认值)&#xff1a;表示该参数只能接收一个值。例如&#xff1a;--foo 123。 nargs?&#xff1a;表示该参数最多接收一个值。如…

gcc/g++的四步编译

目录 前言1.预处理&#xff08;进行宏替换&#xff09;2.编译&#xff08;生成汇编&#xff09;3.汇编&#xff08;生成二进制文件&#xff09;4. 链接 &#xff08;生成可执行文件&#xff09;a. 动态库 && 动态链接b. 静态库 && 静态链接c. 验证d. 动静态链接…

技术实现路径怎么写?(Word项目技术路径文档参考)

软件项目编写技术实现路径至关重要&#xff0c;因为它为项目团队提供了清晰的开发蓝图。这一路径明确了从项目启动到交付各阶段所需的技术方案、步骤及预期成果&#xff0c;有助于团队统一认识&#xff0c;确保开发工作有序进行。同时&#xff0c;技术实现路径有助于识别潜在的…