vue3.0制作弹出窗口（ts开发弹出框插件）

1.插件页面代码<!-- 封装消息提示插件 --> <template> <div class="app-container home"> <el-dialog v-model="isShow" title="测试弹框标题" width="30%" draggable :before-close="hide" > <el-tree-v2 :data.sync="queryParams" :props="props" :height="208" /> <!-- {{ data.queryParams }} --> <template #footer> <span class="dialog-footer"> <el-button @click="hide">取消</el-button> <el-button type="primary" @click="confirmCallback()">确认</el-button> </span> </template> </el-dialog> <!-- <div v-if="isShow" class="message">{{ tipText }}</div> --> </div> </template> <script setup lang="ts" name="Toast"> import { toRefs } from "vue"; import { ElDialog, ElButton, ElTreeV2 } from "element-plus"; import { ref, reactive } from "vue"; import { listDept } from "@/api/system/dept.js"; /* --------------------------------定义变量以及定义函数-------------------------------- */ const data = reactive({ queryParams: [ { deptName: "", status: "", }, ], }); const props = { value: "deptId", label: "deptName", children: "children", }; const loading = ref(true); const { queryParams } = toRefs(data); /* --------------------------------定义调用打开页面以及关闭页面方法-------------------------------- */ //定义一个函数、用于回调函数的赋值 let callbacks = reactive<Function>(() => Function); //是否打开页面 let isShow = ref<boolean>(false); const show = (callback: Function) => { isShow.value = true; //把回调函数赋值给外面定义的函数，便于后面选完值把参数返回给调用页面 callbacks = callback; //调用show方法的时候调用获取数据的接口 getDeptList(); }; const hide = () => (isShow.value = false); /* --------------------------------定义调用打开页面以及关闭页面方法-------------------------------- */ /* --------------------------------定义变量以及定义函数-------------------------------- */ /* --------------------------------函数方法-------------------------------- */ /** 查询部门列表 */ function getDeptList(): void { loading.value = true; listDept(queryParams.value).then((response) => { queryParams.value = response.data; loading.value = false; }); } //点击确认按钮调用方法 function confirmCallback(): void { callbacks("选择了什么数字"); //关闭当前页面 hide(); } /* --------------------------------函数方法-------------------------------- */ // 将组件内部的方法导出，方便外部访问 defineExpose({ show, hide, }); </script> ，今天小编就来说说关于vue3.0制作弹出窗口?下面更多详细答案一起来看看吧!

vue3.0制作弹出窗口

1.插件页面代码

<!-- 封装消息提示插件 --> <template> <div class="app-container home"> <el-dialog v-model="isShow" title="测试弹框标题" width="30%" draggable :before-close="hide" > <el-tree-v2 :data.sync="queryParams" :props="props" :height="208" /> <!-- {{ data.queryParams }} --> <template #footer> <span class="dialog-footer"> <el-button @click="hide">取消</el-button> <el-button type="primary" @click="confirmCallback()">确认</el-button> </span> </template> </el-dialog> <!-- <div v-if="isShow" class="message">{{ tipText }}</div> --> </div> </template> <script setup lang="ts" name="Toast"> import { toRefs } from "vue"; import { ElDialog, ElButton, ElTreeV2 } from "element-plus"; import { ref, reactive } from "vue"; import { listDept } from "@/api/system/dept.js"; /* --------------------------------定义变量以及定义函数-------------------------------- */ const data = reactive({ queryParams: [ { deptName: "", status: "", }, ], }); const props = { value: "deptId", label: "deptName", children: "children", }; const loading = ref(true); const { queryParams } = toRefs(data); /* --------------------------------定义调用打开页面以及关闭页面方法-------------------------------- */ //定义一个函数、用于回调函数的赋值 let callbacks = reactive<Function>(() => Function); //是否打开页面 let isShow = ref<boolean>(false); const show = (callback: Function) => { isShow.value = true; //把回调函数赋值给外面定义的函数，便于后面选完值把参数返回给调用页面 callbacks = callback; //调用show方法的时候调用获取数据的接口 getDeptList(); }; const hide = () => (isShow.value = false); /* --------------------------------定义调用打开页面以及关闭页面方法-------------------------------- */ /* --------------------------------定义变量以及定义函数-------------------------------- */ /* --------------------------------函数方法-------------------------------- */ /** 查询部门列表 */ function getDeptList(): void { loading.value = true; listDept(queryParams.value).then((response) => { queryParams.value = response.data; loading.value = false; }); } //点击确认按钮调用方法 function confirmCallback(): void { callbacks("选择了什么数字"); //关闭当前页面 hide(); } /* --------------------------------函数方法-------------------------------- */ // 将组件内部的方法导出，方便外部访问 defineExpose({ show, hide, }); </script>

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.使用自定义的插件

<template> <div> <el-button type="primary" @click="open">点击调用弹框</el-button> </div> </template> <script setup name="Index"> import { ElButton } from "element-plus"; const instance = getCurrentInstance(); // 使用自定义的全局消息提示插件 function open() { instance.proxy.$toast.show((res) => { console.log("回调函数返回的内容：" res); }); } </script>