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

如何在一个传统的html中，引入vueJs并使用vue复制组件？

news 2026/2/7 20:08:42

如何在一个传统的html中，引入vueJs并使用vue复制组件？

    • 1.1 引言
    • 1.2 背景
    • 1.3 解决方案
      • 1.3.1 解决方案一：直接使用clipboard(不推荐仅供参考学习)
      • 1.3.2 解决方案二：封装指令js库后使用 (推荐)

1.1 引言

这篇博文主要分享如何在一个传统的html中，通过通过引入js方式使用vue功能和vue复制组件。

1.2 背景

项目是一个传统的前后端在一起的项目，前端框架使用的一些前端组件库是通过在html中引入bootstrap,vue 等JS实现。
无法使用包管理器，不支持import和export等语法，现在要求在这样的背景下，实现一键复制功能。
在这里插入图片描述

1.3 解决方案

在这里插入图片描述
我们知道在支持包管理器安装的vue项目中可以这样使用，有两种用法。

但是很显然第二种v-clipboard:copy="inputData" 使用方式更加优雅。

<template><div class="app-container"><el-tabs v-model="activeName"><el-tab-pane label="use clipboard  directly" name="directly"><el-input v-model="inputData" placeholder="Please input" style="width:400px;max-width:100%;" /><el-button type="primary" icon="el-icon-document" @click="handleCopy(inputData,$event)">copy</el-button></el-tab-pane><el-tab-pane label="use clipboard by v-directive" name="v-directive"><el-input v-model="inputData" placeholder="Please input" style="width:400px;max-width:100%;" /><el-button v-clipboard:copy="inputData" v-clipboard:success="clipboardSuccess" type="primary" icon="el-icon-document">copy</el-button></el-tab-pane></el-tabs></div>
</template><script>
import clip from '@/utils/clipboard' // use clipboard directly
import clipboard from '@/directive/clipboard' // use clipboard by v-directiveexport default {name: 'ClipboardDemo',directives: {clipboard},data() {return {activeName: 'directly',inputData: 'https://github.com/PanJiaChen/vue-element-admin'}},methods: {handleCopy(text, event) {clip(text, event)},clipboardSuccess() {this.$message({message: 'Copy successfully',type: 'success',duration: 1500})}}
}
</script>
  • 详细示例参见：https://github.com/PanJiaChen/vue-element-admin/blob/master/src/views/clipboard/index.vue

那么在传统的html中引入js方式使用，又该如何改造呢？

1.3.1 解决方案一：直接使用clipboard(不推荐仅供参考学习)

封装简化下

clipboard_plugin_v1.js

// 定义自定义指令对象
const clipboardDirective = {// 在 bind 钩子中初始化 Clipboard.js 实例bind(el, binding) {const clipboard = new ClipboardJS(el, {text: () => binding.value,});clipboard.on('success', (e) => {e.clearSelection();// 触发成功复制事件，您可以在这里添加自定义处理逻辑el.dispatchEvent(new Event('clipboard-success'));});clipboard.on('error', (e) => {// 触发复制失败事件，您可以在这里添加自定义处理逻辑el.dispatchEvent(new Event('clipboard-error'));});// 将 Clipboard.js 实例绑定到元素上以便后续销毁el._clipboard = clipboard;},// 在 unbind 钩子中销毁 Clipboard.js 实例unbind(el) {const clipboard = el._clipboard;if (clipboard) {clipboard.destroy();delete el._clipboard;}},
};
// 注册自定义指令
Vue.directive('clipboard', clipboardDirective);

html中使用示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>使用自定义 Clipboard 指令</title>
</head>
<body><div id="app"><el-button@click="copyText(textToCopy)"id="clipboardBtn"type="primary"icon="el-icon-document">复制</el-button></div><!-- 引入 Vue.js --><script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script><!-- 引入 Clipboard.js 这里如果服务器不支持访问外网，请下载下来引入本地文件效果等价于执行 npm install `clipboard` --save --><script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.8/dist/clipboard.min.js"></script><!-- 引入自定义 clipboard_plugin_v1.js 效果等价于 import clipboard from '@/directive/clipboard' --><script src="../assets/js/clipboard/clipboard_plugin_v1.js"></script><script>// 创建 Vue 实例new Vue({el: '#app',directives: { clipboardDirective },data: {textToCopy: '这是要复制的文本',clipboardInstance: null,},methods: {copyText(textToCopy) {let vm = this;if (vm.clipboardInstance) {vm.clipboardInstance.destroy(); // 销毁旧的 clipboard 实例}// 在此处将要复制的文本设置为传递的参数vm.clipboardInstance = new ClipboardJS('#clipboardBtn', {text: () => textToCopy});vm.clipboardInstance.on('success', (e) => {e.clearSelection();vm.$message({message: '文本已成功复制到剪贴板!',type: 'success',duration: 1500})});vm.clipboardInstance.on('error', (e) => {e.clearSelection();vm.$message({message: '复制操作失败，请手动复制文本!',type: 'error',duration: 1500})});// 在调用 copyToClipboard 方法时自动启动剪贴板复制操作，因此用户不需要手动单击按钮来复制文本。//vm.clipboardInstance.onClick({ currentTarget: document.querySelector('#clipboardBtn') });},},});</script>
</body>
</html>

1.3.2 解决方案二：封装指令js库后使用 (推荐)

为了简化可以使用类似 v-clipboard:copy语法，这里我们除了引入剪切板js库之外，还需要封装下指令到一个js中。
因为只有封装后我们才能使用directives: { clipboardDirectiveV2 }, 这种语法来简化使用。

clipboard_plugin_v2.js

// clipboard_plugin_v2.js// Inspired by https://github.com/Inndy/vue-clipboard2
const clipboardDirectiveV2 = {bind(el, binding) {if (binding.arg === 'success') {el._v_clipboard_success = binding.value} else if (binding.arg === 'error') {el._v_clipboard_error = binding.value} else {const clipboard = new ClipboardJS(el, {text: () => binding.value,action() { return binding.arg === 'cut' ? 'cut' : 'copy' }});clipboard.on('success', e => {const callback = el._v_clipboard_successcallback && callback(e) // eslint-disable-line})clipboard.on('error', e => {const callback = el._v_clipboard_errorcallback && callback(e) // eslint-disable-line})el._v_clipboard = clipboard}},update(el, binding) {if (binding.arg === 'success') {el._v_clipboard_success = binding.value} else if (binding.arg === 'error') {el._v_clipboard_error = binding.value} else {el._v_clipboard.text = function() { return binding.value }el._v_clipboard.action = function() { return binding.arg === 'cut' ? 'cut' : 'copy' }}},unbind(el, binding) {if (binding.arg === 'success') {delete el._v_clipboard_success} else if (binding.arg === 'error') {delete el._v_clipboard_error} else {el._v_clipboard.destroy()delete el._v_clipboard}}
}
// 注册自定义指令
Vue.directive('clipboard', clipboardDirectiveV2);

然后在html中调用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>使用自定义 Clipboard 指令</title>
</head>
<body><div id="app"><!-- 使用自定义 Clipboard 指令复制文本 --><button v-clipboard:copy="textToCopy" @clipboard-success="handleCopySuccess" @clipboard-error="handleCopyError">复制</button></div><!-- 引入 Vue.js --><script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script><!-- 引入 Clipboard.js 这里如果服务器不支持访问外网，请下载下来引入本地文件效果等价于执行 npm install `clipboard` --save --><script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.8/dist/clipboard.min.js"></script><!-- 引入自定义 clipboard_plugin_v2.js 效果等价于 import clipboard from '@/directive/clipboard' --><script src="../assets/js/clipboard/clipboard_plugin_v2.js"></script><script>// 创建 Vue 实例new Vue({el: '#app',directives: { clipboardDirectiveV2 },data: {textToCopy: '这是要复制的文本',},methods: {handleCopySuccess() {// 复制成功时的处理逻辑alert('文本已成功复制到剪贴板!');},handleCopyError() {// 复制失败时的处理逻辑alert('复制操作失败，请手动复制文本!');},},});</script>
</body>
</html>

在这里插入图片描述

相关文章：

如何在一个传统的html中，引入vueJs并使用vue复制组件？

如何在一个传统的html中&#xff0c;引入vueJs并使用vue复制组件&#xff1f; 1.1 引言1.2 背景1.3 解决方案1.3.1 解决方案一&#xff1a;直接使用clipboard(不推荐仅供参考学习)1.3.2 解决方案二&#xff1a;封装指令js库后使用 (推荐) 1.1 引言 这篇博文主要分享如何在一个…...

编程日记 2023/10/12 1:03:31

【轻松玩转MacOS】故障排除篇

引言 在使用 MacOS 时&#xff0c;遇到故障是在所难免的。不要担心&#xff0c;这篇文章将为您提供一些常见的故障排除步骤&#xff0c;并介绍如何联系苹果的支持团队寻求帮助。让我们一起来看看吧&#xff01; 一、常见的故障排除步骤 1.1 网络连接问题 如果你发现你的Mac…...

编程日记 2023/10/12 1:02:29

Linux基本指令（1）

Linux基本指令&#xff08;1&#xff09; 1.ls指令1.1ls的用法 2. pwd指令3.cd指令3.1 cd3.2补充内容3.3 cd - 指令3.4 cd ~ 指令 4. touch指令4.1stat指令 5.mkdir 指令6.rmdir/rm指令6.1补充内容 7.man指令8.nano 指令9.cat指令10 cp指令11 mv指令12 echo指令12.1 > 输出重…...

编程日记 2023/10/12 1:01:28

计算机毕业设计选题推荐-springboot 网上手机销售系统

✍✍计算机编程指导师 ⭐⭐个人介绍&#xff1a;自己非常喜欢研究技术问题&#xff01;专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目&#xff1a;有源码或者技术上的问题欢迎在评论区一起讨论交流&#xff01; ⚡⚡ Java实战 |…...

编程日记 2023/10/12 1:00:27

2、vscode c++ 项目配置调试及运行

文章目录 1、项目布局2、多项目管理2.1 先是一个总的CMakeLists.txt2.2 每个项目2.3 多版本OPENCV 3、调试和运行 接上一篇文章&#xff0c;vscode和cmake的c环境配置好以后&#xff0c;我们要写项目&#xff0c;再写对应的CMakeLists.txt 1、项目布局 . ├── bin ├── bu…...

编程日记 2023/10/12 0:59:26

二叉搜索树的最近公共祖先

二叉搜索树的最近公共祖先-力扣 235 题 求二叉搜索树最近公共祖先&#xff08;祖先也包括自己&#xff09; 前提&#xff1a; 1.节点值唯一 2.p和q都存在 要点&#xff1a;若 p&#xff0c;q 在 ancestor 的两侧&#xff0c;则 ancestor 就是它们的最近公共祖先 解题思路&…...

编程日记 2023/10/12 0:57:24

LuatOS-SOC接口文档(air780E)-- i2c - I2C操作

常量 常量 类型 解释 i2c.FAST number 高速 i2c.SLOW number 低速 i2c.exist(id) i2c编号是否存在 参数 传入值类型 解释 int 设备id, 例如i2c1的id为1, i2c2的id为2 返回值 返回值类型 解释 bool 存在就返回true,否则返回false 例子 -- 检查i2c1是否存…...

编程日记 2023/10/12 0:56:23

帝国cms改目录后打不开，帝国cms改目录生成后还是404

帝国CMS更改了网站域名或者栏目目录地址信息打不开的解决方法&#xff0c;一起来看看吧&#xff1a; 很多的小伙伴们&#xff0c;改了后台的系统设置里面的网站地址或者栏目目录地址&#xff0c;信息页就打不开的解决方法如下&#xff1a; 后台>系统>数据更新>更新信…...

编程日记 2023/10/12 0:54:21

计算机毕业设计选什么题目好？springboot智慧养老中心管理系统

✍✍计算机编程指导师 ⭐⭐个人介绍&#xff1a;自己非常喜欢研究技术问题&#xff01;专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目&#xff1a;有源码或者技术上的问题欢迎在评论区一起讨论交流&#xff01; ⚡⚡ Java实战 |…...

编程日记 2023/10/12 0:53:20

创建一个基本的win32窗口

1.建立一个窗口的基本步骤 &#xff08;1&#xff09;向系统注册一个窗体类 &#xff08;2&#xff09;根据窗体类创建窗口 &#xff08;3&#xff09;进入消息循环 2.程序结构 (1)主函数的输入参数 int WINAPI WinMain( HISTANCE hInstance,//当前窗口的句柄 HINSTANCE hPr…...

编程日记 2023/10/12 0:52:19

如何在 Spring Boot 中使用 WebSocket

在Spring Boot中使用WebSocket构建实时应用 WebSocket是一种用于实现双向通信的网络协议&#xff0c;它非常适合构建实时应用程序&#xff0c;如在线聊天、实时通知和多人协作工具。Spring Boot提供了对WebSocket的支持&#xff0c;使得在应用程序中集成WebSocket变得非常容易…...

编程日记 2023/10/12 0:51:18

ubuntu2023装完显卡驱动和CUDA CUDNN开机只有下划线闪烁

解决方法 网上很多方案&#xff0c;如Ubuntu开机后卡死只有左上角有一个下划线不停闪烁_ubuntu开机左上角横杠一直闪-CSDN博客&#xff0c;原因是显卡驱动和系统内核不兼容&#xff0c;解决方案是CtrlAltF2打开tty模式进行问题检查 但是我CtrlAltF2完全没反应。 于是&#xf…...

编程日记 2023/10/12 0:50:17

MySQL三种安装方法（yum安装、编译安装、二进制安装）

mysql安装 一、yum安装方式二、编译安装方式三、二进制安装方式 切记&#xff1a;一定要关闭防火墙和selinux&#xff01;&#xff01;&#xff01; 服务器配置&#xff1a;2C4G即可&#xff0c;一台 一、yum安装方式 mysql的官方网站&#xff1a;www.mysql.com 中文官网&…...

编程日记 2023/10/12 0:49:15

《视觉 SLAM 十四讲》第 7 讲 视觉里程计1 【如何根据图像 估计 相机运动】【特征点法】

github源码链接V2 文章目录 第 7 讲 视觉里程计17.1 特征点法7.1.1 特征点7.1.2 ORB 特征FAST 关键点 ⟹ \Longrightarrow ⟹ Oriented FASTBRIEF 描述子 7.1.3 特征匹配 7.2 实践 【Code】本讲 CMakeLists.txt 7.2.1 使用 OpenCV 进行 ORB 的特征匹配 【Code】7.2.2 手写 O…...

编程日记 2023/10/12 0:48:14

9. 一个SpringBoot项目运行

新手如何运行一个SpringBoot项目 1.SpringBoot项目运行 新创建的SpringBoot项目如何运行 2.启动lombok注解 点击该按钮&#xff0c;启动lombok注解支持 3.展示说明...

编程日记 2023/10/12 0:47:13

如何实现chatGPT批量问答，不用token

一、背景 因为需要批量提取一本教材里的概念做成知识图谱&#xff0c;想用chatGPT做概念提取。 调用api&#xff1f;别想了… 免费帐户的api慢得一批于是想用模仿人类交互的方法来调用&#xff0c;本来想用pyautogui的&#xff0c;但是主要是与浏览器交互&#xff0c;还是用s…...

编程日记 2023/10/12 0:45:11

Arduino驱动LIS2DH三轴加速度传感器（惯性测量传感器篇）

目录 1、传感器特性 2、硬件原理图 3、控制器和传感器连线图 4、驱动程序 LIS2DH加速度计相对传统的ADXL345在稳定性以及功耗上都有一定的优化，低功耗模式下仅为2μA（普通模式11μA），并且最高支持5.3KHz输出频率，拥有2g/4g/8g/16g四档可选量程&...

编程日记 2023/10/12 0:44:10

B 开组会(可持久线段树+树剖) 武汉大学2023年新生程序设计竞赛（同步赛）

其实题目就是每次询问一个节点 在这个节点的基础上往下继续遍历t的深度&#xff0c;在这个遍历的过程中找一个最大值就行了 其实这个题目数据非常水&#xff0c;直接暴力就可以过了 下面是别人过的代码 #include<bits/stdc.h> using namespace std; const int mxn5e…...

编程日记 2023/10/12 0:43:08

vue的axios方法

Axios是Vue.js推荐使用的一个基于Promise的HTTP库&#xff0c;用于浏览器和Node.js中发送HTTP请求。它可以让我们更容易地与后端进行数据交互。 以下是Axios的基本用法&#xff1a; 安装Axios 在Vue项目中&#xff0c;可以使用npm来安装Axios&#xff1a; npm install axio…...

编程日记 2023/10/12 0:42:06

gitlab docker部署，备份，恢复。附踩坑记录

本次安装在CentOS7下进行 1、安装yum 检查是否已经安装yum yum --version如果未安装 sudo yum install -y yum-utils添加镜像源&#xff1a; 国外镜像源&#xff1a;yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo阿里镜像源&am…...

编程日记 2023/10/12 0:41:06

铭豹扩展坞 USB转网口 突然无法识别解决方法

当 USB 转网口扩展坞在一台笔记本上无法识别，但在其他电脑上正常工作时，问题通常出在笔记本自身或其与扩展坞的兼容性上。以下是系统化的定位思路和排查步骤，帮助你快速找到故障原因： 背景： 一个M-pard（铭豹）扩展坞的网卡突然无法识别了，扩展出来的三个USB接口正常。…...

编程新知 2026/2/5 10:34:36

python打卡day49

知识点回顾&#xff1a; 通道注意力模块复习空间注意力模块CBAM的定义 作业&#xff1a;尝试对今天的模型检查参数数目&#xff0c;并用tensorboard查看训练过程 import torch import torch.nn as nn# 定义通道注意力 class ChannelAttention(nn.Module):def __init__(self,…...

编程新知 2026/2/7 5:37:17

Oracle查询表空间大小

1 查询数据库中所有的表空间以及表空间所占空间的大小 SELECTtablespace_name,sum( bytes ) / 1024 / 1024 FROMdba_data_files GROUP BYtablespace_name; 2 Oracle查询表空间大小及每个表所占空间的大小 SELECTtablespace_name,file_id,file_name,round( bytes / ( 1024 …...

编程新知 2025/11/8 0:24:13

FastAPI 教程：从入门到实践

FastAPI 是一个现代、快速&#xff08;高性能&#xff09;的 Web 框架&#xff0c;用于构建 API&#xff0c;支持 Python 3.6。它基于标准 Python 类型提示&#xff0c;易于学习且功能强大。以下是一个完整的 FastAPI 入门教程&#xff0c;涵盖从环境搭建到创建并运行一个简单的…...

编程新知 2025/10/16 7:51:26

屋顶变身“发电站” ，中天合创屋面分布式光伏发电项目顺利并网！

5月28日&#xff0c;中天合创屋面分布式光伏发电项目顺利并网发电&#xff0c;该项目位于内蒙古自治区鄂尔多斯市乌审旗&#xff0c;项目利用中天合创聚乙烯、聚丙烯仓库屋面作为场地建设光伏电站&#xff0c;总装机容量为9.96MWp。 项目投运后&#xff0c;每年可节约标煤3670…...

编程新知 2026/1/30 2:45:51

【论文笔记】若干矿井粉尘检测算法概述

总的来说&#xff0c;传统机器学习、传统机器学习与深度学习的结合、LSTM等算法所需要的数据集来源于矿井传感器测量的粉尘浓度&#xff0c;通过建立回归模型来预测未来矿井的粉尘浓度。传统机器学习算法性能易受数据中极端值的影响。YOLO等计算机视觉算法所需要的数据集来源于…...

编程新知 2025/10/14 10:52:24

如何将联系人从 iPhone 转移到 Android

从 iPhone 换到 Android 手机时&#xff0c;你可能需要保留重要的数据&#xff0c;例如通讯录。好在&#xff0c;将通讯录从 iPhone 转移到 Android 手机非常简单&#xff0c;你可以从本文中学习 6 种可靠的方法&#xff0c;确保随时保持连接&#xff0c;不错过任何信息。 第 1…...

编程新知 2026/1/31 5:09:27

【HarmonyOS 5 开发速记】如何获取用户信息（头像/昵称/手机号）

1.获取 authorizationCode&#xff1a; 2.利用 authorizationCode 获取 accessToken&#xff1a;文档中心 3.获取手机&#xff1a;文档中心 4.获取昵称头像&#xff1a;文档中心 首先创建 request 若要获取手机号&#xff0c;scope必填 phone&#xff0c;permissions 必填 …...

编程新知 2025/9/17 2:39:21

为什么要创建 Vue 实例

核心原因：Vue 需要一个「控制中心」来驱动整个应用 你可以把 Vue 实例想象成你应用的**「大脑」或「引擎」。它负责协调模板、数据、逻辑和行为，将它们变成一个活的、可交互的应用**。没有这个实例，你的代码只是一堆静态的 HTML、JavaScript 变量和函数，无法「活」起来。 …...

编程新知 2026/1/3 7:21:08

django blank 与 null的区别

1.blank blank控制表单验证时是否允许字段为空 2.null null控制数据库层面是否为空 但是&#xff0c;要注意以下几点&#xff1a; Django的表单验证与null无关&#xff1a;null参数控制的是数据库层面字段是否可以为NULL&#xff0c;而blank参数控制的是Django表单验证时字…...

编程新知 2025/7/7 3:34:13