vue3如何使用element-plus的dialog

更新時間：2023年04月23日 09:30:51 作者：Yoge lv-3

這篇文章主要介紹了vue3優(yōu)雅的使用element-plus的dialog,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下

如何優(yōu)雅的基于 element-plus,封裝一個夢中情 dialog

優(yōu)點

擺脫繁瑣的 visible 的命名，以及反復(fù)的重復(fù) dom。

想法

將 dialog 封裝成一個函數(shù)就能喚起的組件。如下：

addDialog({
  title: "測試", //彈窗名
  component: TestVue, //組件
  width: "400px", //彈窗大小
  props: {
    //傳給組件的參數(shù)
    id: 0
  },
  callBack: (data: any) => {
    //當(dāng)彈窗任務(wù)結(jié)束后，調(diào)用父頁面的回掉函數(shù)。（比如我新增完成了需要刷新列表頁面）
    console.log("回調(diào)函數(shù)", data)
  }
})

效果圖

基于 el-dialog 進(jìn)行初步封裝

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

首先定義了 dialogList,它包含了所有彈窗的信息。
component 使用 componet is 去動態(tài)加載子組件
addDialog 調(diào)用喚起彈窗的函數(shù)
closeDialog 關(guān)閉彈窗的函數(shù)

在app.vue中掛載

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

<template>
 <router-view />
 <Mydialog></Mydialog>
</template>

<style scoped>

</style>

使用

創(chuàng)建一個彈窗組件

<!-- test.vue -->
<template>
  父彈窗
  <el-button type="primary" @click="openChildDialog">打開子dialog</el-button>
  <el-button type="primary" @click="closeDialog">關(guān)閉彈窗</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) => {
      //當(dāng)彈窗任務(wù)結(jié)束后，調(diào)用父頁面的回掉函數(shù)。（比如我新增完成了需要刷新列表頁面）
      console.log("回調(diào)函數(shù)", data)
    }
  })
}

多層級彈窗嵌套

<!-- child.vue -->
<template>
  子彈窗
  <el-button type="primary" @click="closeDialog">關(guān)閉彈窗</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>