@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

| Prop | 类型 | 默认 | 说明 | |------|------|------|------| | value | Boolean | false | 显隐，配合 v-model | | visible | Boolean | — | 显隐，配合 :visible.sync；传入时优先于 value | | title | String | '' | 标题文案（可用 title 插槽覆盖） | | size | String | 'large' | 尺寸预设：small / medium / large / full | | width | String | — | 自定义宽度，传入后优先于 size | | top | String | '15vh' | 距顶部距离 | | modal | Boolean | true | 是否显示遮罩 | | modalAppendToBody | Boolean | true | 遮罩是否插入至 body | | appendToBody | Boolean | true | 弹框是否插入至 body | | lockScroll | Boolean | true | 是否锁定滚动 | | destroyOnClose | Boolean | false | 关闭时销毁内容 | | closeOnClickModal | Boolean | false | 点击遮罩是否关闭 | | closeOnPressEscape | Boolean | true | 按 ESC 是否关闭 | | showClose | Boolean | true | 是否显示右上角关闭按钮 | | center | Boolean | false | 是否居中布局 | | fullscreen | Boolean | false | 是否全屏 | | draggable | Boolean | false | 是否可拖拽标题栏移动弹框（全屏时自动禁用） | | showFooter | Boolean | true | 是否显示底部栏（有 footer 插槽时也会显示） | | showCancel | Boolean | true | 是否显示取消按钮 | | showConfirm | Boolean | true | 是否显示确定按钮 | | cancelText | String | '取消' | 取消按钮文案 | | confirmText | String | '确定' | 确定按钮文案 | | confirmType | String | 'primary' | 确定按钮 el-button type | | confirmLoading | Boolean | false | 确定按钮 loading | | confirmDisabled | Boolean | false | 确定按钮禁用 | | beforeClose | Function | — | 关闭前钩子，签名 (done) => void，需自行调用 done() | | customClass | String | '' | 追加到弹框根节点的自定义 class | | zIndex | Number | — | 可选。透传 Element Popup；多层弹框请勿写死 |

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

size 与宽度对照

| size | 宽度 | |------|------| | small | 420px | | medium | 560px | | large | 720px | | full | 92% |

层级约定

| 场景 | z-index | |------|---------| | 表格全屏（与 table 包约定） | 2900 | | ProDialog / 遮罩 | 自弹框起点（默认 3000）起由 PopupManager 自动递增 | | MessageBox | 弹框起点 + 1900（默认 4900） | | Message / Notification | 弹框起点 + 2000（默认 5000） |

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≈13900；Message≈14000

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

Events

| 事件 | 说明 | |------|------| | input / update:value | v-model 更新 | | update:visible | :visible.sync 更新 | | confirm | 点击确定（不会自动关闭） | | cancel | 点击取消（会关闭弹框） | | open / opened / close / closed | 与 Element Dialog 一致 |

Slots

| 插槽 | 说明 | |------|------| | 默认 | 弹框主体内容 | | title | 自定义标题区 | | footer | 自定义底部（覆盖默认取消/确定） |

主题变量

可通过 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