Singkirkan penamaan dom yang kelihatan dan berulang.
Enkapsulasi dialog ke dalam komponen yang boleh ditimbulkan oleh fungsi. Seperti berikut:
addDialog({ title: "测试", //弹窗名 component: TestVue, //组件 width: "400px", //弹窗大小 props: { //传给组件的参数 id: 0 }, callBack: (data: any) => { //当弹窗任务结束后,调用父页面的回掉函数。(比如我新增完成了需要刷新列表页面) console.log("回调函数", data) } })
// index.ts import { reactive } from "vue" type dialogOptions = { title: string component: any props?: Object width: string visible?: any callBack?: Function } export const dialogList: dialogOptions[] = reactive([]) export const addDialog = (options: dialogOptions) => { dialogList.push(Object.assign(options, { visible: true })) } export const closeDialog = (item: dialogOptions, i: number, args: any) => { dialogList.splice(i, 1) item.callBack && item.callBack(...args) }
<template> <Teleport to="body"> <el-dialog v-for="(item, index) in dialogList" :key="index" :title="item.title" :width="item.width" v-model="item.visible" > <component :is="item.component" v-bind="item.props" @close="(...args:any) => closeDialog(item, index, args)" /> </el-dialog> </Teleport> </template> <script setup lang="ts"> import { dialogList, closeDialog } from "./index" </script>
Pertama mentakrifkan dialogList, yang mengandungi maklumat semua tetingkap timbul.
komponen Penggunaan komponen adalah untuk memuatkan subkomponen secara dinamik
addDialog Panggil fungsi yang membangkitkan tetingkap pop timbul
fungsi closeDialog untuk menutup tetingkap pop timbul
<script setup> import Mydialog from "@/components/gDialog/index.vue" </script> <template> <router-view /> <Mydialog></Mydialog> </template> <style scoped> </style>
<!-- test.vue --> <template> 父弹窗 <el-button type="primary" @click="openChildDialog">打开子dialog</el-button> <el-button type="primary" @click="closeDialog">关闭弹窗</el-button> </template> <script setup lang="ts"> import { addDialog } from "@/components/gDialog/index" import childVue from "./child.vue" const props = defineProps(["id"]) console.log(props.id, "props") const emit = defineEmits(["close"]) const closeDialog = () => { emit("close", 1, 2, 34) } const openChildDialog = () => { addDialog({ title: "我是子dialog", width: "500px", component: childVue }) } </script>
<!-- list.vue --> <template> 列表页 <el-button type="primary" @click="openDialog">打开dialog</el-button> </template> <script setup lang="ts"> import { addDialog } from "@/components/gDialog/index" import TestDialog from "./test.vue" const openDialog = () => { addDialog({ title: "我是dialog", width: "500px", props:{ id:0 } component: TestDialog, callBack: (data: any) => { //当弹窗任务结束后,调用父页面的回掉函数。(比如我新增完成了需要刷新列表页面) console.log("回调函数", data) } }) }
<!-- child.vue --> <template> 子弹窗 <el-button type="primary" @click="closeDialog">关闭弹窗</el-button> </template> <script setup lang="ts"> import { addDialog } from "@/components/gDialog/index" const emit = defineEmits(["close"]) const closeDialog = () => { emit("close", 1, 2, 34) } </script>
Atas ialah kandungan terperinci Cara menggunakan dialog elemen-plus dalam vue3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!