最新要闻

广告

手机

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

 警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

家电

  1. 首页
  2. 移动通信
  3. 内容

天天关注：记录--vue3优雅的使用element-plus的dialog

来源：博客园


【资料图】

这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助

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

优点

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

想法

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

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

效果图

基于 el-dialog 进行初步封装

// index.tsimport { 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, isNativeClose?: boolean) => {  dialogList.splice(i, 1)  if (!isNativeClose) item.callBack && item.callBack(...args)}
<script setup lang="ts">  import { dialogList, closeDialog } from "./index"</script>
  • 首先定义了 dialogList,它包含了所有弹窗的信息。
  • component 使用 componet is 去动态加载子组件
  • addDialog 调用唤起弹窗的函数
  • closeDialog 关闭弹窗的函数

在app.vue中挂载

<script setup>import Mydialog from "@/components/gDialog/index.vue"</script>

使用

创建一个弹窗组件

<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>

在列表页面唤醒弹窗

<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)    }  })}

多层级弹窗嵌套

<script setup lang="ts">  import { addDialog } from "@/components/gDialog/index"  const emit = defineEmits(["close"])  const closeDialog = () => {    emit("close", 1, 2, 34)  }</script>

附上代码

代码

本文转载于:

https://juejin.cn/post/7224007334514638903

如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。

关键词：