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

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 应用添加全局功能的工具。插件可以包含&#xff1a; 全局组件注册全局指令添加全局方法注入全局 mixin 混入向 Vue 应用实例注入属性 插件的基本结构 Vue3 插件应该暴露一个 install 方法&#xff0c;该方法将在插件…...

使用最小花费爬楼梯(DP)

给你一个整数数组 cost &#xff0c;其中 cost[i] 是从楼梯第 i 个台阶向上爬需要支付的费用。一旦你支付此费用&#xff0c;即可选择向上爬一个或者两个台阶。 你可以选择从下标为 0 或下标为 1 的台阶开始爬楼梯。 请你计算并返回达到楼梯顶部的最低花费。 示例 1&#xff…...

【Ubuntu】如何在Ubuntu系统中查看端口是否可用

文章目录 前言一、使用netstat命令二、使用ss命令三、使用lsof命令四、使用nc&#xff08;netcat&#xff09;命令总结 前言 本文介绍了如何在Ubuntu系统中查看端口是否可用的方法&#xff0c;并给出了具体的命令示例&#xff0c;帮助用户通过命令行工具检测端口的开放状态。 …...

Hive基础面试-如何理解复用率的

1. 模型的复用率你们是怎么做的&#xff1f; 简单直白的说就是你的模型复用率如何&#xff0c;在业务方是否认可该模型&#xff0c;也是衡量模型建设的一个标准&#xff0c;复用率数&#xff1a;数仓模型涉及的核心是追求模型的复用和共享&#xff0c;引用系数越高&#xff0c;…...

Go 常量为什么只支持基本数据类型?

文章精选推荐 1 JetBrains Ai assistant 编程工具让你的工作效率翻倍 2 Extra Icons&#xff1a;JetBrains IDE的图标增强神器 3 IDEA插件推荐-SequenceDiagram&#xff0c;自动生成时序图 4 BashSupport Pro 这个ides插件主要是用来干嘛的 &#xff1f; 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版本&#xff1a;JDK 8、JDK 11、JDK 17 和 JDK 21 的区别 一、JDK8二、JDK11三、JDK17四、JDK21 一、JDK8 JDK 8 发布于 2014 年&#xff0c;是 Java 语言的一个重要里程碑&#xff0c;带来了许多革命性的特性&#xff0c;改变了 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&#xff0c;返回由 1 到 n 组成的排列中第 k 个排列。 所有排列按字典序排列。1 ≤ n ≤ 9&#xff0c;1 ≤ k ≤ n!。 解题思路 要快速找到第 k 个排列&#xff0c;可以利用数学方法而不是生成所有排列&#xff1a; 1. 知识点&#xff1a;阶乘与…...

国际环境和背景下的云计算领域

前言 在当前国际环境和背景下&#xff0c;云计算领域呈现出复杂多变的局面&#xff0c;其发展深受技术创新、地缘政治、全球经济以及监管政策的影响。以下从技术趋势、市场竞争、地缘政治和监管环境四个方面详细解析云计算领域的现状。 一、技术趋势&#xff1a;多云与边缘计算…...

logstash 解析数组格式json数据:split, json

1&#xff0c;需求说明 原始数据格式&#xff1a; 1条 &#xff08;2*2&#xff09;》4个指标数据 [{"app":"aa","url":"www.1.com","metrics":[{"name":"cpu","value":11},{"name&quo…...

Linux的开发工具(二)

1.vim的基本操作 正常模式到插入模式 输入a 输入i 输入o 示例 输入iao下面的就会变成INSERT模式 插入模式到正常模式 按Esc键 正常模式到低行模式 shift&#xff1b; &#xff1a;w保存当前文件 &#xff1a;wq保存并退出 &#xff1a;q&#xff01;强制退出 2.vi…...

Bokeh实现大规模数据可视化的最佳实践

目录 引言 一、Bokeh简介 二、安装Bokeh 三、数据准备 四、性能优化 五、创建图表 六、添加交互功能 七、应用案例 八、高级技巧 九、总结 引言 在数据科学领域,数据可视化是一个至关重要的环节。通过可视化,我们可以直观地理解数据的特征和趋势,为数据分析和决策…...

Oracle表碎片整理与优化

Oracle数据库中的表碎片整理与优化是一个重要的维护任务&#xff0c;可以显著提高数据库的性能。表碎片通常是由于频繁的插入、删除和更新操作导致的。以下是一些常见的方法和步骤&#xff0c;帮助你进行表碎片整理与优化。 1. 识别碎片表 首先&#xff0c;需要识别哪些表存在…...

【华为云函数工作流】python的函数中如何获取请求链接中带的参数

背景 通过调用函数的url&#xff0c;将参数传递给函数执行&#xff0c;函数里如何获取这个参数 过程 下一个简单的demo如下 参考这个链接https://support.huaweicloud.com/devg-functiongraph/functiongraph_02_0420.html写一个demo&#xff0c;这个是百度视频云获取token的…...

最新Kali安装详细版教程(附安装包,傻瓜式安装教程)

本文主要详细介绍 kali 的安装过程&#xff0c;以及安装完成后的基本设置&#xff0c;比如安装增强工具&#xff0c;安装中文输入法以及更新升级等操作。 文章目录 实验环境准备工作步骤说明安装虚拟机安装 Kali安装增强工具安装中文输入法更新升级 实验环境 VMware &#x…...

【unity小技巧】unity最完美的CharacterController 3d角色控制器,实现移动、跳跃、下蹲、奔跑、上下坡、物理碰撞效果,复制粘贴即用

最终效果 文章目录 最终效果前言为什么使用CharacterControllerSimpleMove和Move如何选择&#xff1f;1. SimpleMove2. Move 配置CharacterController参数控制相机移动跳跃方式一方式二 下蹲处理下坡抖动问题实现奔跑和不同移速控制完整代码补充&#xff0c;简单版本 实现物理碰…...

66 mysql 的 表自增长锁

前言 mysql 的表锁之 AUTO_INC, 是我们自增长的时候做并发控制的锁 主要是用于 自增长生成新的 id 的时候的控制 在前面的文档中, 我们又看到 mysql 这边自增长的处理的相关的大概脉络 但是 对于一些 并发控制的细节, 我们当时 应该是直接忽略掉了 我们这里就来看一下…...

神经网络问题之一:梯度消失(Vanishing Gradient)

梯度消失&#xff08;Vanishing Gradient&#xff09;问题是深度神经网络训练中的一个关键问题&#xff0c;它主要发生在反向传播过程中&#xff0c;导致靠近输入层的权重更新变得非常缓慢甚至几乎停滞&#xff0c;严重影响网络的训练效果和性能。 图1 在深度神经网络中容易出现…...

大话软工笔记—需求分析概述

需求分析&#xff0c;就是要对需求调研收集到的资料信息逐个地进行拆分、研究&#xff0c;从大量的不确定“需求”中确定出哪些需求最终要转换为确定的“功能需求”。 需求分析的作用非常重要&#xff0c;后续设计的依据主要来自于需求分析的成果&#xff0c;包括: 项目的目的…...

服务器硬防的应用场景都有哪些?

服务器硬防是指一种通过硬件设备层面的安全措施来防御服务器系统受到网络攻击的方式&#xff0c;避免服务器受到各种恶意攻击和网络威胁&#xff0c;那么&#xff0c;服务器硬防通常都会应用在哪些场景当中呢&#xff1f; 硬防服务器中一般会配备入侵检测系统和预防系统&#x…...

最新SpringBoot+SpringCloud+Nacos微服务框架分享

文章目录 前言一、服务规划二、架构核心1.cloud的pom2.gateway的异常handler3.gateway的filter4、admin的pom5、admin的登录核心 三、code-helper分享总结 前言 最近有个活蛮赶的&#xff0c;根据Excel列的需求预估的工时直接打骨折&#xff0c;不要问我为什么&#xff0c;主要…...

剑指offer20_链表中环的入口节点

链表中环的入口节点 给定一个链表&#xff0c;若其中包含环&#xff0c;则输出环的入口节点。 若其中不包含环&#xff0c;则输出null。 数据范围 节点 val 值取值范围 [ 1 , 1000 ] [1,1000] [1,1000]。 节点 val 值各不相同。 链表长度 [ 0 , 500 ] [0,500] [0,500]。 …...

[Java恶补day16] 238.除自身以外数组的乘积

给你一个整数数组 nums&#xff0c;返回 数组 answer &#xff0c;其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法&#xff0c;且在 O(n) 时间复杂度…...

ios苹果系统,js 滑动屏幕、锚定无效

现象&#xff1a;window.addEventListener监听touch无效&#xff0c;划不动屏幕&#xff0c;但是代码逻辑都有执行到。 scrollIntoView也无效。 原因&#xff1a;这是因为 iOS 的触摸事件处理机制和 touch-action: none 的设置有关。ios有太多得交互动作&#xff0c;从而会影响…...

PHP 8.5 即将发布:管道操作符、强力调试

前不久&#xff0c;PHP宣布了即将在 2025 年 11 月 20 日 正式发布的 PHP 8.5&#xff01;作为 PHP 语言的又一次重要迭代&#xff0c;PHP 8.5 承诺带来一系列旨在提升代码可读性、健壮性以及开发者效率的改进。而更令人兴奋的是&#xff0c;借助强大的本地开发环境 ServBay&am…...

论文阅读笔记——Muffin: Testing Deep Learning Libraries via Neural Architecture Fuzzing

Muffin 论文 现有方法 CRADLE 和 LEMON&#xff0c;依赖模型推理阶段输出进行差分测试&#xff0c;但在训练阶段是不可行的&#xff0c;因为训练阶段直到最后才有固定输出&#xff0c;中间过程是不断变化的。API 库覆盖低&#xff0c;因为各个 API 都是在各种具体场景下使用。…...

【FTP】ftp文件传输会丢包吗?批量几百个文件传输,有一些文件没有传输完整,如何解决?

FTP&#xff08;File Transfer Protocol&#xff09;本身是一个基于 TCP 的协议&#xff0c;理论上不会丢包。但 FTP 文件传输过程中仍可能出现文件不完整、丢失或损坏的情况&#xff0c;主要原因包括&#xff1a; ✅ 一、FTP传输可能“丢包”或文件不完整的原因 原因描述网络…...

Python爬虫实战:研究Restkit库相关技术

1. 引言 1.1 研究背景与意义 在当今信息爆炸的时代,互联网上存在着海量的有价值数据。如何高效地采集这些数据并将其应用于实际业务中,成为了许多企业和开发者关注的焦点。网络爬虫技术作为一种自动化的数据采集工具,可以帮助我们从网页中提取所需的信息。而 RESTful API …...