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

vue H5如何实现copy功能

news 2025/9/14 17:49:24

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构建分布式锁案例

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

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

Windows 和 Ubuntu 双系统安装

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

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

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

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

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

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

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

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

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里项目配置： 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，转速停止后，继电器没有恢复到初始状态。若停止之前是报警，继电器吸合，则停止后继电器还是吸合。我心想不会啊，这软件都弄了好几年了，一直也没出现过状况。经过与调试同事的沟通&#…...

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

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

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

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

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

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

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

JS进阶DAY4|节点操作

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

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

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

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

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

go 语言中协程和GMP模型

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

编程日记 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（命令提示符）临时设置代理（只对当前会话有效）：查看当前代理设置：清除临时代理设置：永久设置代理（对所有新的 CMD 会话有效）&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实现在图片上框选标记（放大，缩小，移动，删除）

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

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

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

目录人物代码示例： 子弹代码示例： 总结上面代码： 注意点： 人物代码示例： 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 模块的核心启动点，其职责是管理 Raft 状态机的状态变迁、日志处理及集群通信等逻辑。通过对源码的逐行分析，我们将全面揭示其运行机制，探讨其设计背后的分布式系统理念。函数核心结构 raftNode.start 方…...

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

Flask RESTful 示例

目录 1. 环境准备2. 安装依赖3. 修改main.py4. 运行应用5. API使用示例获取所有任务获取单个任务创建新任务更新任务删除任务中文乱码问题： 下面创建一个简单的Flask RESTful API示例。首先，我们需要创建环境，安装必要的依赖，然后…...

编程新知 2025/9/14 3:01:15

CRMEB 框架中 PHP 上传扩展开发：涵盖本地上传及阿里云 OSS、腾讯云 COS、七牛云

目前已有本地上传、阿里云OSS上传、腾讯云COS上传、七牛云上传扩展扩展入口文件文件目录 crmeb\services\upload\Upload.php namespace crmeb\services\upload;use crmeb\basic\BaseManager; use think\facade\Config;/*** Class Upload* package crmeb\services\upload* …...

编程新知 2025/8/9 13:14:15

用docker来安装部署freeswitch记录

今天刚才测试一个callcenter的项目，所以尝试安装freeswitch 1、使用轩辕镜像 - 中国开发者首选的专业 Docker 镜像加速服务平台编辑下面/etc/docker/daemon.json文件为 {"registry-mirrors": ["https://docker.xuanyuan.me"] }同时可以进入轩…...

编程新知 2025/8/23 22:05:50

tree 树组件大数据卡顿问题优化

问题背景项目中有用到树组件用来做文件目录，但是由于这个树组件的节点越来越多，导致页面在滚动这个树组件的时候浏览器就很容易卡死。这种问题基本上都是因为dom节点太多，导致的浏览器卡顿，这里很明显就需要用到虚拟列表的技术&…...

编程新知 2025/9/12 14:52:52

Maven 概述、安装、配置、仓库、私服详解

目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...

编程新知 2025/9/7 8:50:41

使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台

🎯 使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台 📌 项目背景随着大语言模型（LLM）的广泛应用，开发者常面临多个挑战：各大模型（OpenAI、Claude、Gemini、Ollama）接口风格不统一；缺乏一个统一平台进行模型调用与测试；本地模型 Ollama 的集成与前…...

编程新知 2025/9/7 8:50:27