首页 > 网络编程 > JavaScript > vue3如何使用element-plus的dialog

vue3如何使用element-plus的dialog

福牛 4月 23, 2023 52 0

如何优雅的基于 element-plus,封装一个梦中情 dialog

优点

摆脱繁琐的 visible 的命名，以及反复的重复 dom。

想法

将 dialog 封装成一个函数就能唤起的组件。如下：

  1. addDialog({
  2.      title: “测试”, //弹窗名
  3.      component: TestVue, //组件
  4.      width: “400px”, //弹窗大小
  5.      props: {
  6.      //传给组件的参数
  7.      id: 0
  8.      },
  9.      callBack: (data: any) => {
  10.      //当弹窗任务结束后，调用父页面的回掉函数。（比如我新增完成了需要刷新列表页面）
  11.      console.log(“回调函数”, data)
  12.      }
  13. })

效果图

-1

基于 el-dialog 进行初步封装

  1. // index.ts
  2. import { reactive } from “vue”
  3. type dialogOptions = {
  4.      title: string
  5.      component: any
  6.      props?: Object
  7.      width: string
  8.      visible?: any
  9.      callBack?: Function
  10. }
  11. export const dialogList: dialogOptions[] = reactive([])
  12.  
  13. export const addDialog = (options: dialogOptions) => {
  14.      dialogList.push(Object.assign(options, { visible: true }))
  15. }
  16.  
  17. export const closeDialog = (item: dialogOptions, i: number, args: any) => {
  18.      dialogList.splice(i, 1)
  19.      item.callBack && item.callBack(…args)
  20. }
  1. <template>
  2.      <Teleport to=“body”>
  3.      <el-dialog
  4.          v-for=“(item, index) in dialogList”
  5.          :key=“index”
  6.          :title=“item.title”
  7.          :width=“item.width”
  8.          v-model=“item.visible”
  9.      >
  10.          <component :is=“item.component” v-bind=“item.props” @close=“(…args:any) => closeDialog(item, index, args)” />
  11.      </el-dialog>
  12.      </Teleport>
  13. </template>
  14.  
  15. <script setup lang=“ts”>
  16.      import { dialogList, closeDialog } from “./index”
  17. </script>
  • 首先定义了 dialogList,它包含了所有弹窗的信息。
  • component 使用 componet is 去动态加载子组件
  • addDialog 调用唤起弹窗的函数
  • closeDialog 关闭弹窗的函数

在app.vue中挂载

  1. <script setup>
  2. import Mydialog from “@/components/gDialog/index.vue”
  3. </script>
  4.  
  5. <template>
  6.      <router-view />
  7.      <Mydialog></Mydialog>
  8. </template>
  9.  
  10. <style scoped>
  11.  
  12. </style>

使用

创建一个弹窗组件

  1. <!– test.vue –>
  2. <template>
  3.      父弹窗
  4.      <el-button type=“primary” @click=“openChildDialog”>打开子dialog</el-button>
  5.      <el-button type=“primary” @click=“closeDialog”>关闭弹窗</el-button>
  6. </template>
  7.  
  8. <script setup lang=“ts”>
  9.      import { addDialog } from “@/components/gDialog/index”
  10.      import childVue from “./child.vue”
  11.      const props = defineProps([“id”])
  12.      console.log(props.id, “props”)
  13.      const emit = defineEmits([“close”])
  14.      const closeDialog = () => {
  15.      emit(“close”, 1, 2, 34)
  16.      }
  17.      const openChildDialog = () => {
  18.      addDialog({
  19.          title: “我是子dialog”,
  20.          width: “500px”,
  21.          component: childVue
  22.      })
  23.      }
  24. </script>

在列表页面唤醒弹窗

  1. <!– list.vue –>
  2. <template>
  3.      列表页
  4.      <el-button type=“primary” @click=“openDialog”>打开dialog</el-button>
  5. <;/template>
  6. <script setup lang=“ts”>
  7. import { addDialog } from “@/components/gDialog/index”
  8. import TestDialog from “./test.vue”
  9. const openDialog = () => {
  10.      addDialog({
  11.      title: “我是dialog”,
  12.      width: “500px”,
  13.      props:{
  14.          id:0
  15.      }
  16.      component: TestDialog,
  17.      callBack: (data: any) => {
  18.          //当弹窗任务结束后，调用父页面的回掉函数。（比如我新增完成了需要刷新列表页面）
  19.          console.log(“回调函数”, data)
  20.      }
  21.      })
  22. }

多层级弹窗嵌套

  1. <!– child.vue –>
  2. <template>
  3.      子弹窗
  4.      <el-button type=“primary” @click=“closeDialog”>关闭弹窗</el-button>
  5. </template>
  6.  
  7. <script setup lang=“ts”>
  8.      import { addDialog } from “@/components/gDialog/index”
  9.      const emit = defineEmits([“close”])
  10.      const closeDialog = () => {
  11.      emit(“close”, 1, 2, 34)
  12.      }
  13. </script>

附上代码

代码

到此这篇关于vue3优雅的使用element-plus的dialog的文章就介绍到这了,更多相关vue3使用element-plus的dialog内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

标签

相关推荐

发表评论