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

vue H5如何实现copy功能

news 2026/2/7 10:43:47

vue H5如何实现copy功能

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><link rel="stylesheet" href="https://unpkg.com/vant@2.12/lib/index.css" /><title></title><style>*{margin: 0;padding: 0;}.order-message-row{font-size: 40px;}</style>
</head><body>
<div id="app"><div class="order-message-row"><div class="order-message-span">订单编号</div><div class="order-message-number">{{orderNumber}}</div><van-button  @click="copyOrderNumber" type="primary">复制按钮</van-button></div>
</div></body>
<script src="https://unpkg.com/vue@2.6/dist/vue.min.js"></script>
<script src="https://unpkg.com/vant@2.12/lib/vant.min.js"></script><!--组件-->
<script>var vm = new Vue({el: '#app',data() {return {orderNumber:"sssssssssssssssss"}},created() {},mounted() {},methods: {//订单详情粘贴板copyOrderNumber() {console.log("1223")const input = document.createElement('input');input.value = this.orderNumber; // 获取要复制的文本document.body.appendChild(input);input.select(); // 选中文本document.execCommand('copy'); // 执行复制操作document.body.removeChild(input); // 移除临时的输入框alert('订单编号已复制到剪贴板'); // 可选：给用户一个反馈},}})
</script></html>

粘贴板图
在这里插入图片描述
完成 ！！！！

相关文章：

vue H5如何实现copy功能

vue H5如何实现copy功能 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><link rel"stylesheet" href"https://unpkg.com/vant2.12/lib/index.css" /><title></title><st…...

编程日记 2024/12/12 4:58:42

Golang使用etcd构建分布式锁案例

在本教程中&#xff0c;我们将学习如何使用Go和etcd构建分布式锁系统。分布式锁系统对于管理对分布式系统中共享资源的并发访问至关重要。它有助于维护一致性&#xff0c;防止竞争条件&#xff0c;并确保在任何给定时间只有一个进程独占访问资源。 我们将使用Go作为编程语言&am…...

编程日记 2024/12/12 4:57:41

Windows 和 Ubuntu 双系统安装

复现论文的时候&#xff0c;个别包只有Linux版本&#xff0c;并且源码编译比较麻烦&#xff0c;所以干脆直接安装一个双系统&#xff08;WinUbuntu&#xff09;&#xff0c;方便复现论文。 参考视频链接&#xff1a;Windows 和 Ubuntu 双系统的安装和卸载 0.所需工具 4G以上U…...

编程日记 2024/12/12 4:55:38

多媒体文件解复用（Demuxing）过程

多媒体文件的解复用&#xff08;Demuxing&#xff09;过程指的是从一个多媒体容器文件&#xff08;如 MP4、MKV、AVI 等&#xff09;中提取不同类型的多媒体数据流&#xff08;例如视频流、音频流、字幕流等&#xff09;的过程。 容器文件本身并不包含实际的视频或音频数据&…...

编程日记 2024/12/12 4:52:35

从 Zuul 迁移到 Spring Cloud Gateway：一步步实现服务网关的升级

从 Zuul 迁移到 Spring Cloud Gateway&#xff1a;一步步实现服务网关的升级 迁移前的准备工作迁移步骤详解第一步&#xff1a;查看源码第二步&#xff1a;启动类迁移第三步&#xff1a;引入 Gateway 依赖第四步 编写bootstrap.yaml第五步&#xff1a;替换路由配置第六步&#…...

编程日记 2024/12/12 4:51:34

qt之插件编译

QtXlsxWriter sudo apt install qtbase5-private-dev git clone https://github.com/dbzhang800/QtXlsxWriter.git cd QtXlsxWriter/ qmake make -j6 sudo make install #将生成的lib 及 include copy至项目路径的lib 及include里项目配置&#xff1a; QT xlsxbluetoo…...

编程日记 2024/12/12 4:47:30

pandas一行拆成多行

import pandas as pd df pd.DataFrame({Country:[China,US,Japan,EU,UK/Australia, UK/Netherland],Number:[100, 150, 120, 90, 30, 2],Value: [1, 2, 3, 4, 5, 6],label: list(abcdef)})# 法一 推荐 df2df.drop(Country, axis1).join(df[Country].str.split(/, expandTrue).…...

编程日记 2024/12/12 4:46:29

今天调了个转速的小BUG

同事说转速表有个bug&#xff0c;转速停止后&#xff0c;继电器没有恢复到初始状态。若停止之前是报警&#xff0c;继电器吸合&#xff0c;则停止后继电器还是吸合。我心想不会啊&#xff0c;这软件都弄了好几年了&#xff0c;一直也没出现过状况。 经过与调试同事的沟通&#…...

编程日记 2024/12/12 4:44:27

第三节、电机定速转动【51单片机-TB6600驱动器-步进电机教程】

摘要&#xff1a;本节介绍用定时器定时的方式&#xff0c;精准控制脉冲时间&#xff0c;从而控制步进电机速度 一、计算过程 1.1 电机每一步的角速度等于走这一步所花费的时间&#xff0c;走一步角度等于步距角&#xff0c;走一步的时间等于一个脉冲的时间 w s t e p t … ……...

编程日记 2024/12/12 4:43:25

从一个Bug谈前端响应拦截器的应用

一、问题场景 今天在开发商品管理系统时&#xff0c;遇到了一个有趣的问题&#xff1a;当添加重复的商品编号时&#xff0c;页面同时弹出了两条 "商品编号已存在" 错误提示&#xff1a; 这个问题暴露了前端错误处理机制的混乱&#xff0c;让我们从这个问题出发&…...

编程日记 2024/12/12 4:42:20

JS进阶DAY4|节点操作

嘿&#x1f44b; 今天我们要一起深入探索JavaScript中的DOM操作&#xff0c;这是前端开发中不可或缺的技能。&#x1f31f; 准备好了吗&#xff1f;让我们一起跳进DOM的海洋&#xff0c;看看怎么用代码操控网页的结构吧&#xff01; 目录 1. 增加节点 1.1 使用 appendChild 方…...

编程日记 2024/12/12 4:40:16

【Web】2023安洵杯第六届网络安全挑战赛 WP

目录 Whats my name easy_unserialize signal Swagger docs 赛题链接&#xff1a;GitHub - D0g3-Lab/i-SOON_CTF_2023: 2023 第六届安洵杯 题目环境/源码 Whats my name 第一段正则用于匹配以 include 结尾的字符串&#xff0c;并且在 include 之前&#xff0c;可以有任…...

编程日记 2024/12/12 4:39:12

go 语言中协程和GMP模型

为什么需要协程&#xff1f; 协程用来更加精细地利用线程&#xff0c;支撑超高的并发的。协程&#xff0c;从 runtime 的角度看&#xff0c;协程就是一个被调度的 g 结构体。 G 就是协程&#xff0c;M 是线程&#xff0c;P 是为了优化多线程并发时&#xff0c;会抢夺协程队列的…...

编程日记 2024/12/12 4:38:11

coco数据集转换SAM2格式

coco是一个大json汇总了所有train的标签 SAM2训练一张图对应一个json标签 import json import os from pycocotools import mask as mask_utils import numpy as np import cv2def poly2mask(points, width, height):points_array np.array(points, dtypenp.int32).reshape(-…...

编程日记 2024/12/12 4:37:10

【CMD、PowerShell和Bash设置代理】

【CMD、PowerShell和Bash设置代理】 1. CMD&#xff08;命令提示符&#xff09;临时设置代理&#xff08;只对当前会话有效&#xff09;&#xff1a;查看当前代理设置&#xff1a;清除临时代理设置&#xff1a;永久设置代理&#xff08;对所有新的 CMD 会话有效&#xff09;&am…...

编程日记 2024/12/12 4:24:59

22智能 代码作业集合

3-2 #include <stdio.h>int main() {int a 21;int b 10;int c ;c a b;printf("Line 1 - c 的值是 %d\n", c );c a - b;printf("Line 2 - c 的值是 %d\n", c );c a * b;printf("Line 3 - c 的值是 %d\n", c );c a / b;printf("…...

编程日记 2024/12/12 4:22:57

实现一个简单的后台架子(侧边栏菜单渲染,折叠,黑白主题,组件主题色,全屏,路由快捷栏)

目录 侧边栏菜单渲染 侧边栏折叠 黑白主题 全屏切换 切换组件主题色 tab快捷栏 代码 侧边栏菜单渲染 结合ElementPlus组件库进行实现 新建的Vue3项目,引入了格式化样式normalize.css和ElementPlus,并进行了全局引入 并进行了全局引入 设置高度为100% 粘贴ElementPlus的…...

编程日记 2024/12/12 4:19:53

vue3-canvas实现在图片上框选标记（放大，缩小，移动，删除）

双图版本&#xff08;模板对比&#xff09; 业务描述&#xff1a;模板与图片对比&#xff0c;只操作模板框选的位置进行色差对比&#xff0c;传框选坐标位置给后端&#xff0c;返回对比结果显示 draw.js文件&#xff1a; 新增了 createUuid&#xff0c;和求取两个数组差集的方…...

编程日记 2024/12/12 4:16:49

unity3d—demo(2d人物左右移动发射子弹)

目录 人物代码示例&#xff1a; 子弹代码示例&#xff1a; 总结上面代码&#xff1a; 注意点&#xff1a; 人物代码示例&#xff1a; using System.Collections; using System.Collections.Generic; using UnityEngine;public class PlayerTiao : MonoBehaviour {public f…...

编程日记 2024/12/12 4:15:48

【ETCD】【源码阅读】 深入解析 raftNode.start`函数：Raft 核心启动逻辑剖析

raftNode.start方法 是 etcd 中 Raft 模块的核心启动点&#xff0c;其职责是管理 Raft 状态机的状态变迁、日志处理及集群通信等逻辑。通过对源码的逐行分析&#xff0c;我们将全面揭示其运行机制&#xff0c;探讨其设计背后的分布式系统理念。 函数核心结构 raftNode.start 方…...

编程日记 2024/12/12 4:14:47

基于距离变化能量开销动态调整的WSN低功耗拓扑控制开销算法matlab仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.算法仿真参数 5.算法理论概述 6.参考文献 7.完整程序 1.程序功能描述 通过动态调整节点通信的能量开销&#xff0c;平衡网络负载&#xff0c;延长WSN生命周期。具体通过建立基于距离的能量消耗模型&am…...

编程新知 2026/2/6 5:38:46

镜像里切换为普通用户

如果你登录远程虚拟机默认就是 root 用户&#xff0c;但你不希望用 root 权限运行 ns-3&#xff08;这是对的&#xff0c;ns3 工具会拒绝 root&#xff09;&#xff0c;你可以按以下方法创建一个 非 root 用户账号 并切换到它运行 ns-3。 一次性解决方案&#xff1a;创建非 roo…...

编程新知 2025/9/11 11:00:29

Linux云原生安全：零信任架构与机密计算

Linux云原生安全&#xff1a;零信任架构与机密计算 构建坚不可摧的云原生防御体系 引言&#xff1a;云原生安全的范式革命 随着云原生技术的普及&#xff0c;安全边界正在从传统的网络边界向工作负载内部转移。Gartner预测&#xff0c;到2025年&#xff0c;零信任架构将成为超…...

编程新知 2025/8/17 17:11:47

QT： `long long` 类型转换为 `QString` 2025.6.5

在 Qt 中&#xff0c;将 long long 类型转换为 QString 可以通过以下两种常用方法实现&#xff1a; 方法 1&#xff1a;使用 QString::number() 直接调用 QString 的静态方法 number()&#xff0c;将数值转换为字符串&#xff1a; long long value 1234567890123456789LL; …...

编程新知 2026/2/1 6:30:04

uniapp 开发ios， xcode 提交app store connect 和 testflight内测

uniapp 中配置 配置manifest 文档&#xff1a;manifest.json 应用配置 | uni-app官网 hbuilderx中本地打包 下载IOS最新SDK 开发环境 | uni小程序SDK hbulderx 版本号&#xff1a;4.66 对应的sdk版本 4.66 两者必须一致 本地打包的资源导入到SDK 导入资源 | uni小程序SDK …...

编程新知 2026/1/31 8:35:07

【SpringBoot自动化部署】

SpringBoot自动化部署方法 使用Jenkins进行持续集成与部署 Jenkins是最常用的自动化部署工具之一&#xff0c;能够实现代码拉取、构建、测试和部署的全流程自动化。 配置Jenkins任务时&#xff0c;需要添加Git仓库地址和凭证&#xff0c;设置构建触发器&#xff08;如GitHub…...

编程新知 2025/11/18 2:17:20

Vue 模板语句的数据来源

&#x1f9e9; Vue 模板语句的数据来源&#xff1a;全方位解析 Vue 模板&#xff08;<template> 部分&#xff09;中的表达式、指令绑定&#xff08;如 v-bind, v-on&#xff09;和插值&#xff08;{{ }}&#xff09;都在一个特定的作用域内求值。这个作用域由当前 组件…...

编程新知 2026/2/1 6:18:18

ubuntu系统文件误删(/lib/x86_64-linux-gnu/libc.so.6)修复方案 [成功解决]

报错信息&#xff1a;libc.so.6: cannot open shared object file: No such file or directory&#xff1a; #ls, ln, sudo...命令都不能用 error while loading shared libraries: libc.so.6: cannot open shared object file: No such file or directory重启后报错信息&…...

编程新知 2026/2/5 14:35:21

区块链技术概述

区块链技术是一种去中心化、分布式账本技术&#xff0c;通过密码学、共识机制和智能合约等核心组件&#xff0c;实现数据不可篡改、透明可追溯的系统。 一、核心技术 1. 去中心化 特点&#xff1a;数据存储在网络中的多个节点&#xff08;计算机&#xff09;&#xff0c;而非…...

编程新知 2025/10/25 7:41:33

实战设计模式之模板方法模式

概述 模板方法模式定义了一个操作中的算法骨架&#xff0c;并将某些步骤延迟到子类中实现。模板方法使得子类可以在不改变算法结构的前提下&#xff0c;重新定义算法中的某些步骤。简单来说&#xff0c;就是在一个方法中定义了要执行的步骤顺序或算法框架&#xff0c;但允许子类…...

编程新知 2026/1/26 23:42:12