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

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

ruisui882个月前 (02-27)技术分析14

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弹框” 的相关文章

Deepin Linux正式引入AI功能,成为第一个正式加入AI潮流的Linux发行版

Deepin Linux是一个基于Debian的Linux发行版,以美观和实用性而闻名。现在为了达到人工智能发展趋势的前沿,Deepin Linux的开发人员宣布,他们已经开始将AI功能集成到桌面环境及其随附的应用程序中。AI集成包含了两种风格——AI驱动的图像编辑插件和AI编码助手。其中图像编辑插...

K8S NFS 共享存储

NFS 共享存储前面我们学习了 hostPath 与 Local PV 两种本地存储方式,但是平时我们的应用更多的是无状态服务,可能会同时发布在不同的节点上,这个时候本地存储就不适用了,往往就需要使用到共享存储了,比如最简单常用的网络共享存储 NFS,本节课我们就来介绍下如何在 Kubernetes...

有效地简化导航-Part 1:信息架构

「四步走」——理想的导航系统要做一个可用的导航系统,网页设计师必须按顺序回答以下4个问题:1. 如何组织内容?2. 如何解释导航的选项?3. 哪种导航菜单最适合容纳这些选项?4. 如何设计导航菜单?前两个问题关注构建和便签内容,通常称为信息架构。信息架构师通常用网站地图(site map diagr...

佳能 EOS R8 深度评测

佳能 EOS R8 的定位是入门级全画幅无反光镜可换镜头相机。尽管在产品阵容中处于这一位置,R8 仍然是一个强大的相机,配备了先进的 R6 II 同款成像传感器、快速处理器和令人难以置信的自动对焦系统,体积小、重量轻、价格低。这款相机是发烧友、旅行者、家庭以及任何想要全画幅传感器相机的人的绝佳选择。...

从 Vue2.0 到 React17——React 开发入门

作者:佚名来源:前端大全前言找工作时发现有一些公司是以React作为技术栈的,而且薪资待遇都不错,为了增加生存的筹码,所以还是得去学一下React,增加一项求生技能。因为我用Vue2.0开发项目已经四年了,故用Vue2.0开发项目的思路来学习React。前端项目是由一个个页面组成的,对于Vue来说,...

尤雨溪:Vue 2生命周期已正式结束,开发团队应迁移至最新版本

IT之家 1 月 2 日消息,Vue.js 作者尤雨溪发文声称,Vue 2 已于 2023 年 12 月 31 日结束生命周期(EOL),目前 Vue 2 已经无法接收到新功能及修复补丁,还在使用 Vue 2 的开发团队应迁移至最新的 Vue 3 版本。据悉,Vue 2.0 最初发布于 2016 年...