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

如何在一个传统的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>

在这里插入图片描述

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

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

相关文章

Newtonsoft.Json use

Newtonsoft.Json use

private void button3_Click(object sender, EventArgs e) { List<Student> students new List<Student>(); students.Add(new Student { Id 1, Name "张三", Sex "男", Description "班长" }); students.…
阅读更多...
【AUTOSAR中断管理】TC3XX中断系统介绍

【AUTOSAR中断管理】TC3XX中断系统介绍

摘要 这段文本主要介绍了AURIX TC3XX的中断系统（Interrupt Router，简称IR）以及中断注册的过程以及举例说明中断机制。 AURIX TC3XX 中断系统（Interrupt Router）介绍 流程图描述中断路由器（IR）处理服务请求并与服务提供者交互。 中断系统的作用是将service request进行…
阅读更多...
【ivX】低调且强大的低代码平台

【ivX】低调且强大的低代码平台

目录 前言 一、低代码那么多 为什么选择iVX&#xff1f; 二、“拼”出来的低代码平台&#xff0c;真的好用吗&#xff1f; 前言 首先我们应该明白自动编程突破可能是&#xff1a;领域内Mini LLM 现在的思路都是搞LLM&#xff0c;几乎像“大跃进”一样全民都在修炼“大模型”…
阅读更多...
UE4和C++ 开发-C++绑定widget的方式和初始化UI

UE4和C++ 开发-C++绑定widget的方式和初始化UI

C绑定widget的方式有两种&#xff0c;一种是使用meta (BindWidget)&#xff0c;一种是使用GetWidgetFromName(TEXT("")),两种方式都可以。一、meta BindWidget方式 注意这种绑定的方式UMG里面的空间名称需要与C里面声明的变量名称相同 Btn_StartU 二、GetWidge…
阅读更多...
京东官方平台API接口获得JD商品详情页信息数据采集产品价格、原价、销量、商品属性名等

京东官方平台API接口获得JD商品详情页信息数据采集产品价格、原价、销量、商品属性名等

京东商品详情API接口的作用是获取京东平台上某个商品的详细信息&#xff0c;包括商品标题、价格、图片、规格、参数、店铺信息等。开发者可以通过该接口获取到商品的原始数据&#xff0c;方便进行数据分析、价格比较、爬取等操作。 通过该接口获取到的商品详情数据可以结合其他…
阅读更多...
运维 | 解决 CentOS 终端主机名显示-bash-4.2 问题

运维 | 解决 CentOS 终端主机名显示-bash-4.2 问题

运维 | 解决 CentOS 终端主机名显示-bash-4.2 问题 问题描述 登录 linux 系统过后&#xff0c;发现显示的是 -bash-4.2# 而不是 root主机名 路径 的显示方式 内容分析 根目录缺少文件配置&#xff0c;如&#xff1a;.bashrc .bash_profile切换到有故障的用户导致 解决办法…
阅读更多...
java学习笔记001

java学习笔记001

java基础 java语言特点 面向对象&#xff0c;强类型&#xff0c;跨平台&#xff0c;解释型 基本概念&#xff08;JVM、JRE、JDK&#xff09; JVM java虚拟机 作用&#xff1a;加载.class文件 JRE Java运行环境 JREJVMJava系统类库 JDK Java开发工具包 JDKJRE编译&a…
阅读更多...
后端：推荐 2 个 .NET 操作的 Redis 客户端类库

后端：推荐 2 个 .NET 操作的 Redis 客户端类库

目录 Redis特点 Redis场景 1. StackExchange.Redis 2. FreeRedis &#x1f680; 快速入门 &#x1f3a3; Master-Slave (读写分离) &#x1f4bb; Pipeline (管道)示例 &#x1f30c; Redis Cluster (集群) Redis &#xff0c;是一个高性能(NOSQL)的key-value数据库,Re…
阅读更多...
docker安装sql-server数据库，使用navicat实现备份数据库导入

docker安装sql-server数据库，使用navicat实现备份数据库导入

docker安装sql-server&#xff0c;使用navicat实现备份数据库导入 1、docker安装sql-server数据库2、使用navicat连接sql-server3、使用navicat导入备份数据库1、第一步&#xff1a;选择需要备份的数据源2、第二步 &#xff08;选择备份计划&#xff0c;设置还原文件位置信息&a…
阅读更多...
WSL2 ubuntu18.04安装ROS

WSL2 ubuntu18.04安装ROS

前期准备 在Windows 10上启用WSL&#xff08;Windows Subsystem for Linux&#xff09;的步骤如下&#xff1a; 打开“控制面板”并选择“程序和功能”选项。单击左侧的“启用或关闭Windows功能”链接。滚动到底部并选中“适用于Linux的Windows子系统”复选框。单击“确定”按钮…
阅读更多...
写csv相关操作

写csv相关操作

std::ios::in&#xff1a;输入模式&#xff0c;表示以读取方式打开流。 std::ios::out&#xff1a;输出模式。 std::ios::app&#xff1a;追加模式&#xff0c;表示以写入方式打开流&#xff0c;并将数据追加到文件末尾而不清除原有内容。 std::ios::trunc&#xff1a;截断模式…
阅读更多...
『Linux小程序』进度条

『Linux小程序』进度条

文章目录 缓冲区问题回车与换行的区别进度条小程序 缓冲区问题 假设有一段代码为: #include<iostream> #include<unistd.h> int main() …
阅读更多...
Apache Spark 的基本概念和在大数据分析中的应用 103.219.31.8

Apache Spark 的基本概念和在大数据分析中的应用 103.219.31.8

Apache Spark是一款基于内存的通用大数据处理框架&#xff0c;旨在加速数据处理速度。它包含了大规模数据处理&#xff0c;机器学习&#xff0c;图计算等组件。以下是几个 Apache Spark 的基本概念&#xff1a; Resilient Distributed Datasets (RDDs)&#xff1a;RDDs是一个分…
阅读更多...
【已解决】Vue全局引入scss 个别页面不生效 / 不自动引入全局样式

【已解决】Vue全局引入scss 个别页面不生效 / 不自动引入全局样式

项目里配置了全局样式的引入&#xff0c;今天新建了 demo 页面去修改 element 的样式&#xff0c;发现全局的样式没有引入进来。 问题原因 在此页面 没有任何样式导致的 项目在编译的时候&#xff0c;会把 .vue 文件的样式抽离到单独的 css 文件中。 当该页面没有css代码的时…
阅读更多...
漏洞复现(CVE-2023-35843)

漏洞复现(CVE-2023-35843)

免责声明&#xff1a; 文章中涉及的漏洞均已修复&#xff0c;敏感信息均已做打码处理&#xff0c;文章仅做经验分享用途&#xff0c;切勿当真&#xff0c;未授权的攻击属于非法行为&#xff01;文章中敏感信息均已做多层打马处理。传播、利用本文章所提供的信息而造成的任何直…
阅读更多...
redis与 缓存击穿、缓存穿透、缓存雪崩

redis与 缓存击穿、缓存穿透、缓存雪崩

什么是缓存击穿、缓存穿透、缓存雪崩 缓存击穿、缓存穿透和缓存雪崩是与缓存相关的三种常见问题&#xff0c;它们可以在高并发的应用中导致性能问题。以下是它们的解释&#xff1a; 缓存击穿&#xff08;Cache Miss&#xff09; 缓存击穿指的是在高并发情况下&#xff0c;有大…
阅读更多...
手动下载/安装Xcode的simulator

手动下载/安装Xcode的simulator

目录 前言解决方案1.获取simulator包下载地址1.1 Apple后台1.2 手动 2.使用三方下载工具下载3.使用命令安装simulator 前言 Xcode某个版本更新之后不带iOS的Simulator,导致全新下载一个Xcode后没法编译项目.公司的网又很坑,每次断掉点重试都重新下载,导致完全没法下下来.特别影…
阅读更多...
了解什么是JWT的原理及实际应用

了解什么是JWT的原理及实际应用

目录 一、介绍&讲述 ( 1 ) 什么是JWT ( 2 ) 为什么要学 二、结构 三、Jwt的工具类的使用 1. 依赖 2. 工具类 3. 过滤器 4. 控制器 5. 配置 6. 测试类 用于生成JWT 解析Jwt 复制jwt&#xff0c;并延时30分钟 测试JWT的有效时间 测试过期JWT的解析 四、…
阅读更多...
紫光同创FPGA 多路视频处理：图像缩放+视频拼接显示，OV7725采集，提供PDS工程源码和技术支持

紫光同创FPGA 多路视频处理：图像缩放+视频拼接显示，OV7725采集，提供PDS工程源码和技术支持

目录 1、前言免责声明 2、相关方案推荐FPGA图像缩放方案推荐FPGA视频拼接叠加融合方案推荐紫光同创FPGA图像采集方案推荐紫光同创FPGA图像缩放方案推荐紫光同创FPGA视频拼接方案推荐 3、设计思路框架为什么选择OV7725摄像头&#xff1f;视频源选择OV7725摄像头配置及采集动态彩…
阅读更多...
【Rust笔记】浅聊 Rust 程序内存布局

【Rust笔记】浅聊 Rust 程序内存布局

浅聊Rust程序内存布局 内存布局看似是底层和距离应用程序开发比较遥远的概念集合&#xff0c;但其对前端应用的功能实现颇具现实意义。从WASM业务模块至Nodejs N-API插件&#xff0c;无处不涉及到FFI跨语言互操作。甚至&#xff0c;做个文本数据的字符集转换也得FFI调用操作系统…
阅读更多...
最新文章

Copyright @ 2022~2023