dialog(弹出框)组件 ​

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

Hidden Title ​

属性事件插槽简介 ​

基础用法 ​

抽屉式用法 ​

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

drawer 配合 fillSlot ​

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

成华样式 ​

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

chenghua主题示例 ​

chenghua 抽屉式用法 ​

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

石景山样式 ​

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

shijingshan主题示例 ​

shijingshan 抽屉式用法 ​

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

通常用法 ​

插槽 ​

全屏 ​

弹框form表单 ​

自动给确认按钮加loading ​

dialog组件如果把@confirm换成:confirm, 那么子组件会优先处理属性confirm, 如果属性confirm是一个异步请求, 会加载loading; 注意: 如果点击后确认按钮一致有loading, 那说明返回的不是promise

内部高度占满100%: fillSlot ​

全局默认配置 ​

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

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

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

属性 ​

方法 ​

Slots ​