dialog(弹出框)组件 ​

https://element-plus.org/zh-CN/component/dialog.html

Hidden Title ​

属性事件插槽简介 ​

基础用法 ​

抽屉式(drawer)用法 ​

设置 mode="drawer" 时，s-dialog 会按抽屉方式展示。mode 的可选值是 dialog 和 drawer，默认值是 dialog。设置 width 可以控制抽屉宽度，width 支持 string 和 number，默认值是 ''。

drawer 配合 fillSlot ​

fillSlot 的可选值是 true 和 false，默认值是 false。

主题（theme 默认值：default） ​

通常用法 ​

插槽 ​

全屏 ​

最大化高度 ​

设置 maximize-height 后，普通 dialog 会尽量占满视口高度，上下各保留 16px，标题栏和底部操作区保持可见，内容区占满剩余空间。maximizeHeight 的可选值是 true 和 false，默认值是 false；mode="drawer" 时无需设置，drawer 本身已经占满可用高度；fullscreen 与该属性同时使用时，以 fullscreen 为准。

弹框form表单 ​

自动给确认按钮加loading ​

dialog组件如果把@confirm换成:confirm, 那么子组件会优先处理属性confirm, 并在方法执行期间加载loading。confirm方法支持返回Promise、thenable或普通值；普通值会在组件内部转换为Promise，方法执行完成或抛出异常后都会自动结束loading。

内部高度占满100%: fillSlot ​

语义样式（variant 默认值：default） ​

设置 variant 可以快速应用对话框的语义样式。删除场景可使用 target 自动生成带危险标签的标准提示：<s-dialog v-model="visible" variant="delete" target="机器之心公众号" />。variant 可选 default / delete / warning，默认值是 default；target 类型 string，默认值未设置；delete 默认标题为“删除确认”、确认按钮文字为“删除”，warning 默认标题为“警告”。传入默认插槽时优先展示自定义正文。

标题追加内容（append 默认无内容） ​

使用 <template #append> 在主标题后追加按钮或标签，副标题仍显示在下一行。title 类型为 string，默认值为 '提示'；subTitle 类型为 string，默认值为 ''。append 无插槽参数；使用 header 自定义整个标题内容区时，append 不生效。

全局默认配置 ​

dialog 支持在 app.use 的第二个参数里配置全局默认值，写法和 Element Plus 的全局配置保持一致。

app.use(SybzComponents, {
  theme: 'chenghua',
  dialog: {
    hideHeaderIcon: true,
  },
})

app.use(SybzComponents, {
  theme: 'chenghua',
  dialog: {
    hideHeaderIcon: true,
  },
})

内容区加载（loading 默认值：false） ​

直接设置 loading 可在内容区域显示加载状态，标题和底部按钮保持可见；mode="drawer" 时也适用。基础写法：<s-dialog v-model="isShow" :loading="loading">内容</s-dialog>。确认按钮的加载状态仍由 confirmAttrs.loading 或 confirm 属性控制。

自定义高度（height 默认值：未设置） ​

height 控制整个弹窗或抽屉的高度，包含标题、内容和底部按钮；内容超出时在正文区域滚动。基础写法：<s-dialog v-model="isShow" :height="420">内容</s-dialog>。数字及数字字符串按 px 处理，也支持 vh、% 和 calc() 等 CSS 长度。设置高度的弹窗会垂直居中，最高为 calc(100dvh - 10px)；抽屉最高为 100dvh。与 maximizeHeight 同时设置时以 height 为准，fullscreen 时忽略 height。

属性 ​

回车确认（enableConfirm 默认 true）在以下场景不会触发，避免误确认：输入法组词中的回车；textarea、contenteditable 中用于换行的回车；按钮、链接等自身有回车行为的元素上按下回车；s-select、日期面板等弹层展开时的回车。业务代码在回车事件上调用 preventDefault() 后同样不会触发确认。

方法 ​

Slots ​