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.使用自定义的插件
点击调用弹框
页面更新:2024-04-25
本站资料均由网友自行发布提供,仅用于学习交流。如有版权问题,请与我联系,QQ:4156828
© CopyRight 2008-2024 All Rights Reserved. Powered By bs178.com 闽ICP备11008920号-3
闽公网安备35020302034844号