最近2018中文字幕在日韩欧美国产成人片_国产日韩精品一区二区在线_在线观看成年美女黄网色视频_国产精品一区三区五区_国产精彩刺激乱对白_看黄色黄大色黄片免费_人人超碰自拍cao_国产高清av在线_亚洲精品电影av_日韩美女尤物视频网站

這篇文章主要講解了“vue3如何使用element-plus的dialog”，文中的講解內(nèi)容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“vue3如何使用element-plus的dialog”吧！

我們提供的服務(wù)有：網(wǎng)站制作、成都網(wǎng)站建設(shè)、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認證、瑪沁ssl等。為千余家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學管理、有技術(shù)的瑪沁網(wǎng)站制作公司

優(yōu)點

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

想法

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

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

基于 el-dialog 進行初步封裝

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

  import { dialogList, closeDialog } from "./index"

• 首先定義了 dialogList,它包含了所有彈窗的信息。

• component 使用 componet is 去動態(tài)加載子組件

• addDialog 調(diào)用喚起彈窗的函數(shù)

• closeDialog 關(guān)閉彈窗的函數(shù)

在app.vue中掛載

import Mydialog from "@/components/gDialog/index.vue"

使用

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

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

在列表頁面喚醒彈窗

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) => {
      //當彈窗任務(wù)結(jié)束后，調(diào)用父頁面的回掉函數(shù)。（比如我新增完成了需要刷新列表頁面）
      console.log("回調(diào)函數(shù)", data)
    }
  })
}

多層級彈窗嵌套

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

感謝各位的閱讀，以上就是“vue3如何使用element-plus的dialog”的內(nèi)容了，經(jīng)過本文的學習后，相信大家對vue3如何使用element-plus的dialog這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！

本文名稱：vue3如何使用element-plus的dialog
新聞來源：http://fisionsoft.com.cn/article/jgdcjs.html