Vue 3 自定义插件开发
Vue3 自定义插件开发
插件简介
Vue3 插件是一种能为 Vue 应用添加全局功能的工具。插件可以包含:
- 全局组件注册
- 全局指令添加
- 全局方法注入
- 全局 mixin 混入
- 向 Vue 应用实例注入属性
插件的基本结构
Vue3 插件应该暴露一个 install 方法,该方法将在插件安装时被调用:
interface Plugin {install: (app: App, options?: any) => void
}
开发一个简单插件
让我们通过一个实例来了解如何开发一个基础插件。这个插件将提供一个全局提示框功能。
1. 创建插件文件
// plugins/toast/index.ts
import { App } from 'vue'
import Toast from './Toast.vue'export default {install: (app: App, options = {}) => {// 创建一个全局提示框组件const toast = {show(message: string) {// 创建提示框逻辑}}// 注册全局组件app.component('Toast', Toast)// 注入全局属性app.config.globalProperties.$toast = toast// 通过 provide/inject 提供依赖app.provide('toast', toast)}
}
2. 创建组件文件
<!-- plugins/toast/Toast.vue -->
<template><transition name="toast-fade"><div v-if="visible" class="toast-wrapper">{{ message }}</div></transition>
</template><script>
import { ref, defineComponent } from 'vue'export default defineComponent({name: 'Toast',props: {message: {type: String,required: true}},setup() {const visible = ref(false)return {visible}}
})
</script><style scoped>
.toast-wrapper {position: fixed;top: 20px;left: 50%;transform: translateX(-50%);padding: 10px 20px;background: rgba(0, 0, 0, 0.7);color: white;border-radius: 4px;
}.toast-fade-enter-active,
.toast-fade-leave-active {transition: opacity 0.3s ease;
}.toast-fade-enter-from,
.toast-fade-leave-to {opacity: 0;
}
</style>
3. 使用插件
// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import ToastPlugin from './plugins/toast'const app = createApp(App)// 安装插件
app.use(ToastPlugin, {duration: 3000 // 配置选项
})app.mount('#app')
4. 在组件中使用
<template><button @click="showToast">显示提示</button>
</template><script>
import { getCurrentInstance } from 'vue'export default {setup() {const { proxy } = getCurrentInstance()const showToast = () => {proxy.$toast.show('这是一条提示消息!')}return {showToast}}
}
</script>
插件的高级特性
1. TypeScript 支持
为了更好的类型支持,我们可以扩展 Vue 的类型定义:
// types/index.d.ts
import { Toast } from './toast'declare module '@vue/runtime-core' {export interface ComponentCustomProperties {$toast: Toast}
}
2. 插件选项处理
interface ToastOptions {duration?: numberposition?: 'top' | 'bottom'theme?: 'light' | 'dark'
}export default {install: (app: App, options: ToastOptions = {}) => {const defaultOptions: ToastOptions = {duration: 3000,position: 'top',theme: 'dark'}const mergedOptions = { ...defaultOptions, ...options }// 使用合并后的选项}
}
3. 生命周期钩子
插件可以在安装时注册全局生命周期钩子:
app.mixin({mounted() {console.log('Component mounted')}
})
相关文章:
Vue 3 自定义插件开发
Vue3 自定义插件开发 插件简介 Vue3 插件是一种能为 Vue 应用添加全局功能的工具。插件可以包含: 全局组件注册全局指令添加全局方法注入全局 mixin 混入向 Vue 应用实例注入属性 插件的基本结构 Vue3 插件应该暴露一个 install 方法,该方法将在插件…...
使用最小花费爬楼梯(DP)
给你一个整数数组 cost ,其中 cost[i] 是从楼梯第 i 个台阶向上爬需要支付的费用。一旦你支付此费用,即可选择向上爬一个或者两个台阶。 你可以选择从下标为 0 或下标为 1 的台阶开始爬楼梯。 请你计算并返回达到楼梯顶部的最低花费。 示例 1ÿ…...
【Ubuntu】如何在Ubuntu系统中查看端口是否可用
文章目录 前言一、使用netstat命令二、使用ss命令三、使用lsof命令四、使用nc(netcat)命令总结 前言 本文介绍了如何在Ubuntu系统中查看端口是否可用的方法,并给出了具体的命令示例,帮助用户通过命令行工具检测端口的开放状态。 …...
Hive基础面试-如何理解复用率的
1. 模型的复用率你们是怎么做的? 简单直白的说就是你的模型复用率如何,在业务方是否认可该模型,也是衡量模型建设的一个标准,复用率数:数仓模型涉及的核心是追求模型的复用和共享,引用系数越高,…...
Go 常量为什么只支持基本数据类型?
文章精选推荐 1 JetBrains Ai assistant 编程工具让你的工作效率翻倍 2 Extra Icons:JetBrains IDE的图标增强神器 3 IDEA插件推荐-SequenceDiagram,自动生成时序图 4 BashSupport Pro 这个ides插件主要是用来干嘛的 ? 5 IDEA必装的插件&…...
DatePicker 日期选择器的使用(当日、近一周、近一月...)
template部分 <el-form-item label"操作日期:" style"margin-left: 50px;"><el-date-pickerv-model"dateRange"type"datetimerange"range-separator"~"start-placeholder"开始日期"end-placeholder&quo…...
【H2O2|全栈】JS进阶知识(六)ES6(2)
目录 前言 开篇语 准备工作 Set和Map 基本概念 Set 相互转化 常见属性和API 数组去重 并集、交集和差集 Map 转化 常见的属性和API Set和Map的区别 This的指向 function函数 箭头函数 修改this 使用方式 三种方式的异同 案例 更改this指向为obj 求数组数…...
聊聊主流几个JDK版本:JDK 8、JDK 11、JDK 17 和 JDK 21 的区别
聊聊主流几个JDK版本:JDK 8、JDK 11、JDK 17 和 JDK 21 的区别 一、JDK8二、JDK11三、JDK17四、JDK21 一、JDK8 JDK 8 发布于 2014 年,是 Java 语言的一个重要里程碑,带来了许多革命性的特性,改变了 Java 开发的方式。 主要更新的…...
MFC工控项目实例三十二模拟量校正值添加修改删除
用两个列表控件实现三十二模拟量校正值添加、修改、删除。 相关代码 void SenSet::OnSelchangeList1() //修改 {m_bAdd_2.EnableWindow(true);m_bParameter_2.EnableWindow(true);m_bDel_2.EnableWindow(false);nSel m_IDC_LIST1.GetCurSel();m_IDC_LIST1.GetText(nSel,nSel_…...
力扣第 60 题 “第 k 个排列”
题目描述 给定整数 n 和 k,返回由 1 到 n 组成的排列中第 k 个排列。 所有排列按字典序排列。1 ≤ n ≤ 9,1 ≤ k ≤ n!。 解题思路 要快速找到第 k 个排列,可以利用数学方法而不是生成所有排列: 1. 知识点:阶乘与…...
国际环境和背景下的云计算领域
前言 在当前国际环境和背景下,云计算领域呈现出复杂多变的局面,其发展深受技术创新、地缘政治、全球经济以及监管政策的影响。以下从技术趋势、市场竞争、地缘政治和监管环境四个方面详细解析云计算领域的现状。 一、技术趋势:多云与边缘计算…...
logstash 解析数组格式json数据:split, json
1,需求说明 原始数据格式: 1条 (2*2)》4个指标数据 [{"app":"aa","url":"www.1.com","metrics":[{"name":"cpu","value":11},{"name&quo…...
Linux的开发工具(二)
1.vim的基本操作 正常模式到插入模式 输入a 输入i 输入o 示例 输入iao下面的就会变成INSERT模式 插入模式到正常模式 按Esc键 正常模式到低行模式 shift; :w保存当前文件 :wq保存并退出 :q!强制退出 2.vi…...
Bokeh实现大规模数据可视化的最佳实践
目录 引言 一、Bokeh简介 二、安装Bokeh 三、数据准备 四、性能优化 五、创建图表 六、添加交互功能 七、应用案例 八、高级技巧 九、总结 引言 在数据科学领域,数据可视化是一个至关重要的环节。通过可视化,我们可以直观地理解数据的特征和趋势,为数据分析和决策…...
Oracle表碎片整理与优化
Oracle数据库中的表碎片整理与优化是一个重要的维护任务,可以显著提高数据库的性能。表碎片通常是由于频繁的插入、删除和更新操作导致的。以下是一些常见的方法和步骤,帮助你进行表碎片整理与优化。 1. 识别碎片表 首先,需要识别哪些表存在…...
【华为云函数工作流】python的函数中如何获取请求链接中带的参数
背景 通过调用函数的url,将参数传递给函数执行,函数里如何获取这个参数 过程 下一个简单的demo如下 参考这个链接https://support.huaweicloud.com/devg-functiongraph/functiongraph_02_0420.html写一个demo,这个是百度视频云获取token的…...
最新Kali安装详细版教程(附安装包,傻瓜式安装教程)
本文主要详细介绍 kali 的安装过程,以及安装完成后的基本设置,比如安装增强工具,安装中文输入法以及更新升级等操作。 文章目录 实验环境准备工作步骤说明安装虚拟机安装 Kali安装增强工具安装中文输入法更新升级 实验环境 VMware &#x…...
【unity小技巧】unity最完美的CharacterController 3d角色控制器,实现移动、跳跃、下蹲、奔跑、上下坡、物理碰撞效果,复制粘贴即用
最终效果 文章目录 最终效果前言为什么使用CharacterControllerSimpleMove和Move如何选择?1. SimpleMove2. Move 配置CharacterController参数控制相机移动跳跃方式一方式二 下蹲处理下坡抖动问题实现奔跑和不同移速控制完整代码补充,简单版本 实现物理碰…...
66 mysql 的 表自增长锁
前言 mysql 的表锁之 AUTO_INC, 是我们自增长的时候做并发控制的锁 主要是用于 自增长生成新的 id 的时候的控制 在前面的文档中, 我们又看到 mysql 这边自增长的处理的相关的大概脉络 但是 对于一些 并发控制的细节, 我们当时 应该是直接忽略掉了 我们这里就来看一下…...
神经网络问题之一:梯度消失(Vanishing Gradient)
梯度消失(Vanishing Gradient)问题是深度神经网络训练中的一个关键问题,它主要发生在反向传播过程中,导致靠近输入层的权重更新变得非常缓慢甚至几乎停滞,严重影响网络的训练效果和性能。 图1 在深度神经网络中容易出现…...
TDengine 快速体验(Docker 镜像方式)
简介 TDengine 可以通过安装包、Docker 镜像 及云服务快速体验 TDengine 的功能,本节首先介绍如何通过 Docker 快速体验 TDengine,然后介绍如何在 Docker 环境下体验 TDengine 的写入和查询功能。如果你不熟悉 Docker,请使用 安装包的方式快…...
springboot 百货中心供应链管理系统小程序
一、前言 随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,百货中心供应链管理系统被用户普遍使用,为方…...
【第二十一章 SDIO接口(SDIO)】
第二十一章 SDIO接口 目录 第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...
在四层代理中还原真实客户端ngx_stream_realip_module
一、模块原理与价值 PROXY Protocol 回溯 第三方负载均衡(如 HAProxy、AWS NLB、阿里 SLB)发起上游连接时,将真实客户端 IP/Port 写入 PROXY Protocol v1/v2 头。Stream 层接收到头部后,ngx_stream_realip_module 从中提取原始信息…...
AI书签管理工具开发全记录(十九):嵌入资源处理
1.前言 📝 在上一篇文章中,我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源,方便后续将资源打包到一个可执行文件中。 2.embed介绍 🎯 Go 1.16 引入了革命性的 embed 包,彻底改变了静态资源管理的…...
Docker 本地安装 mysql 数据库
Docker: Accelerated Container Application Development 下载对应操作系统版本的 docker ;并安装。 基础操作不再赘述。 打开 macOS 终端,开始 docker 安装mysql之旅 第一步 docker search mysql 》〉docker search mysql NAME DE…...
人机融合智能 | “人智交互”跨学科新领域
本文系统地提出基于“以人为中心AI(HCAI)”理念的人-人工智能交互(人智交互)这一跨学科新领域及框架,定义人智交互领域的理念、基本理论和关键问题、方法、开发流程和参与团队等,阐述提出人智交互新领域的意义。然后,提出人智交互研究的三种新范式取向以及它们的意义。最后,总结…...
MFC 抛体运动模拟:常见问题解决与界面美化
在 MFC 中开发抛体运动模拟程序时,我们常遇到 轨迹残留、无效刷新、视觉单调、物理逻辑瑕疵 等问题。本文将针对这些痛点,详细解析原因并提供解决方案,同时兼顾界面美化,让模拟效果更专业、更高效。 问题一:历史轨迹与小球残影残留 现象 小球运动后,历史位置的 “残影”…...
32单片机——基本定时器
STM32F103有众多的定时器,其中包括2个基本定时器(TIM6和TIM7)、4个通用定时器(TIM2~TIM5)、2个高级控制定时器(TIM1和TIM8),这些定时器彼此完全独立,不共享任何资源 1、定…...
游戏开发中常见的战斗数值英文缩写对照表
游戏开发中常见的战斗数值英文缩写对照表 基础属性(Basic Attributes) 缩写英文全称中文释义常见使用场景HPHit Points / Health Points生命值角色生存状态MPMana Points / Magic Points魔法值技能释放资源SPStamina Points体力值动作消耗资源APAction…...
