@hz_yujin/vue-dialog

基于 Vue 3 + Element Plus Dialog 的弹框封装。

• ProDialog — 全量透传 ElDialog 的 props / events / slots / expose
• 可选默认 footer（确认 / 取消）、异步确认、尺寸预设、全局 defaults
• 多级嵌套：子弹框写在父级插槽内自动识别，默认 append-to-body

安装

npm install @hz_yujin/vue-dialog element-plus vue

element-plus、vue 为 peerDependencies，需由宿主项目安装。

使用

import { createApp } from 'vue'
import { ProDialog } from '@hz_yujin/vue-dialog'
import '@hz_yujin/vue-dialog/style.css'

// 或全局注册
import VueDialog from '@hz_yujin/vue-dialog'
app.use(VueDialog)

<script setup lang="ts">
import { ref } from 'vue'
import { ProDialog } from '@hz_yujin/vue-dialog'
import '@hz_yujin/vue-dialog/style.css'

const visible = ref(false)

async function onConfirm() {
  await new Promise((r) => setTimeout(r, 800))
  // 返回 false 可阻止关闭
}
</script>

<template>
  <el-button type="primary" @click="visible = true">打开</el-button>

  <ProDialog
    v-model="visible"
    title="编辑"
    size="md"
    show-footer
    destroy-on-close
    @confirm="onConfirm"
  >
    <p>弹框内容</p>
  </ProDialog>
</template>

尺寸预设

| size | width | |------|-------| | sm | 420px | | md | 520px | | lg | 720px | | xl | 920px |

显式传入 width 时优先生效。

多级弹框

把子 ProDialog 写在父级默认插槽内，会自动识别嵌套并默认开启 append-to-body：

<ProDialog v-model="l1" title="一级" size="lg">
  <el-button @click="l2 = true">打开二级</el-button>

  <ProDialog v-model="l2" title="二级" size="md">
    <el-button @click="l3 = true">打开三级</el-button>
    <ProDialog v-model="l3" title="三级" size="sm" />
  </ProDialog>
</ProDialog>

也可显式标记：nested（强制按嵌套处理）。业务组件内可用：

import { useProDialogNest } from '@hz_yujin/vue-dialog'

const nest = useProDialogNest() // { level, close } | null

全局默认

import { setDialogDefaults } from '@hz_yujin/vue-dialog'

setDialogDefaults({
  size: 'md',
  alignCenter: true,
  destroyOnClose: true,
  confirmText: '保存',
})

透传能力

与 Element Plus Dialog 对齐，包括但不限于：

• props：title / width / fullscreen / draggable（默认 false） / overflow / align-center / before-close / append-to / destroy-on-close / header-class 等
• events：open / opened / close / closed / open-auto-focus / close-auto-focus
• slots：default / header / footer / title（兼容）
• expose：visible / level / isNested / dialogContentRef / resetPosition / handleClose

开发

在 monorepo 根目录：

pnpm install
pnpm dev
pnpm build:dialog