当前位置:首页 > 技术分析 > 正文内容

VUE3+ts开发弹出框插件_vue alert弹框

ruisui884个月前 (02-27)技术分析28

1.插件页面代码





2.TS代码(用于挂载dom以及挂载全局方法)

import { createVNode, VNode, render } from "vue";
import Toast from "./index.vue";
import type { App } from "vue";

export default {
  install(app: App, options: any) {
    // 将组件转换为虚拟DOM
    const Vnode: VNode = createVNode(Toast);
    // 将虚拟DOM挂载到页面节点上
    render(Vnode, document.body);
    // 将插件的主要方法挂载到 app.config.globalProperties 上,这里的 $toast 是自定义的
    app.config.globalProperties.$toast = {
      // 这里仅挂载了一个 show 方法到 $toast 上
      show(callback: Function) {
        Vnode.component?.exposed?.show(callback);
        app.provide("queryParams", "页面的数据,等待赋值");
      },
      hide() {
        Vnode.component?.exposed?.hide();
      }
    };
  },
};

3.main.js或者main.ts引入插件

//自定义插件 plugInUnit
import Dialog from '@/views/heming/dept'

app.use(Dialog) //自定义弹窗插件

4.使用自定义的插件





扫描二维码推送至手机访问。

版权声明:本文由ruisui88发布,如需转载请注明出处。

本文链接:http://www.ruisui88.com/post/2305.html

标签: vue弹窗组件
分享给朋友:

“VUE3+ts开发弹出框插件_vue alert弹框” 的相关文章

出租车费用管理系统——出租车管理软件推荐

出租车费用管理系统是由宏达官方推出的一款出租车管理软件,用户可以在该软件中对出租车进行一个全面的管理,支持车辆信息管理、日常费用结算管理等等,同时该软件中还会对各种费用进行一个总结,帮助各位更加清晰进行查看,非常的便捷,有需要的小伙伴快来喜爱杂岸边埃安。来源:http://www.3h3.com/s...

宽带客户收费管理系统--维修版

宽带客户收费管理系统--维修版headerfooter《宽带客户收费管理系统——维修版》是一款适合宽带运营商使用的管理系统。软件主要包括以下功能:1.主要功能包括用户开户、收费录入、工单登记、故障处理;2.自定义套餐及收费功能;3.强大的查询功能和数据备份功能以及严密的用户权限功能;4.界面设计简洁...

Excel VBA 收费单据打印/一步一步带你设计【收费管理系统】12

本文于2023年6月10日首发于本人同名公众号:Excel活学活用,更多文章案例请搜索关注!☆本期内容概要☆用户窗体设置:收费结算模块设置(7)单据打印大家好,我是冷水泡茶,前几期我们分享了【收费管理系统】的设计,最近一期是(Excel VBA 收费结算模块/一步一步带你设计【收费管理系统】11),...

K8s里我的容器到底用了多少内存?

作者:frostchen导语 Linux下开发者习惯在物理机或者虚拟机环境下使用top和free等命令查看机器和进程的内存使用量,近年来越来越多的应用服务完成了微服务容器化改造,过去查看、监控和定位内存使用量的方法似乎时常不太奏效。如果你的应用程序刚刚迁移到K8s中,经常被诸如以下问题所困扰:容器的...

Python中的11 种数组算法

1. 创建数组 创建数组意味着留出一个连续的内存块来存储相同类型的元素。在大多数语言中,您可以在创建数组时指定数组的大小。假设您正在书架上整理一组书籍,并且您需要为正好 10 本书预留空间。功能架上的每个空间都对应于数组中的一个索引。# Example in Python arr = [1, 2,...

vue开发微信小程序 - 登录组件

移动端登录功能抽象为通用组件,满足:不同移动端应用中一键登录功能复用支持多种登录:微信登录、H5、QQ登录登录组件使用//引用登录组件 import login from "../components/user/login.vue" export default { compone...