@hz_yujin/vue2-base-dialog

@hz_yujin/vue2-base-dialog

基于 Vue 2.6 / 2.7 + Element UI el-dialog 的样式包装器。

• 弹层逻辑全部复用 Element（遮罩、ESC、beforeClose、z-index、全屏等）
• 本包只统一皮肤、尺寸预设与默认底部操作区
• 删改确认请继续用 $confirm / MessageBox（本包提供层级协同）

安装

npm install @hz_yujin/vue2-base-dialog element-ui

注册

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import Vue2BaseDialog from '@hz_yujin/vue2-base-dialog'
import '@hz_yujin/vue2-base-dialog/style.css'

Vue.use(ElementUI)
Vue.use(Vue2BaseDialog)
// 可选：Vue.use(Vue2BaseDialog, { prefix: 'Hz', zIndex: 12000 })

基础用法

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

    <ProDialog
      v-model="visible"
      title="编辑用户"
      size="medium"
      :confirm-loading="saving"
      @confirm="handleSave"
      @cancel="visible = false"
    >
      <el-form label-width="80px" size="small">
        <!-- 表单内容 -->
      </el-form>
    </ProDialog>
  </div>
</template>

<script>
export default {
  data() {
    return { visible: false, saving: false }
  },
  methods: {
    async handleSave() {
      this.saving = true
      try {
        // await api.save(...)
        this.visible = false
      } finally {
        this.saving = false
      }
    },
  },
}
</script>

也可用 :visible.sync="visible" 控制显隐（与 v-model 二选一即可）。

Props

未声明的属性会通过 $attrs 继续透传给 el-dialog。

size 与宽度对照

层级约定

弹框多次打开后 PopupManager 会涨过 起点 + 2000；ProDialog 在 open / opened 时会调用 syncPopupLayerAboveCurrent()，把 $message 继续抬到遮罩之上。

import Vue2BaseDialog, {
  setPopupZIndexBase,
  getPopupLayerZIndex,
} from '@hz_yujin/vue2-base-dialog'
import '@hz_yujin/vue2-base-dialog/style.css'

Vue.use(ElementUI, { zIndex: 12000 })
Vue.use(Vue2BaseDialog, { zIndex: 12000 })
// → Dialog 自 12000 起；MessageBox / Message 按 gap 抬高，并跟随已打开弹框顶层

setPopupZIndexBase(12000)
const { messageBox } = getPopupLayerZIndex()

Events

Slots

主题变量

可通过 CSS 变量微调统一风格：

:root {
  --pro-dialog-radius: 8px;
  --pro-dialog-header-padding: 16px 20px 12px;
  --pro-dialog-body-padding: 16px 20px;
  --pro-dialog-footer-padding: 12px 20px 16px;
  --pro-dialog-border: #ebeef5;
  --pro-dialog-title-color: #303133;
  --pro-dialog-body-color: #606266;
  /* 遮罩：压暗 + 毛玻璃模糊（DeepSeek 风格） */
  --pro-dialog-mask-bg: rgba(0, 0, 0, 0.36);
  --pro-dialog-mask-blur: 2px;
}

按需引入

import { ProDialog, setPopupZIndexBase } from '@hz_yujin/vue2-base-dialog'
import '@hz_yujin/vue2-base-dialog/style.css'

Vue CLI 3 / webpack 4

若构建报错解析现代语法，请将本包加入 transpileDependencies。

发布

pnpm --filter @hz_yujin/vue2-base-dialog publish --access public