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="chenghua" 可以切换到成华样式。成华主题默认展示底部按钮，和普通 dialog 行为一致。

chenghua主题示例 ​

chenghua 抽屉式用法 ​

设置 theme="chenghua" 和 mode="drawer" 时，s-dialog 会按成华主题的抽屉式弹层展示。theme 的可选值是 default、norm、norm16、simple、chenghua 和 shijingshan，默认值是 default；mode 的可选值是 dialog 和 drawer，默认值是 dialog；width 支持 string 和 number，默认值是 ''，可用于控制抽屉宽度。

石景山样式 ​

设置 theme="shijingshan" 可以切换到石景山样式。石景山主题默认展示底部按钮，和普通 dialog 行为一致。

shijingshan主题示例 ​

shijingshan 抽屉式用法 ​

设置 theme="shijingshan" 和 mode="drawer" 时，s-dialog 会按石景山主题的抽屉式弹层展示。theme 的可选值是 default、norm、norm16、simple、chenghua 和 shijingshan，默认值是 default；mode 的可选值是 dialog 和 drawer，默认值是 dialog；width 支持 string 和 number，默认值是 ''，可用于控制抽屉宽度。

通常用法 ​

插槽 ​

全屏 ​

最大化高度 ​

设置 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 默认标题为“警告”。传入默认插槽时优先展示自定义正文。

sybz 主题（theme 默认值：default） ​

设置 theme="sybz" 使用思云博智配色。theme 可选 default / norm / norm16 / simple / chenghua / shijingshan / sybz，默认值为 default。品牌蓝 #4876EF，AI 辅助绿 #00D3AB。

全局默认配置 ​

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

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

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

属性 ​

方法 ​

Slots ​