主题
DialogService 函数式弹窗
使用
import { showDialog } from "@ksware/ksw-ux";基础用法
自定义弹窗内容
使用自定义内容时,可以通过插槽参数获取内容ref实例、弹窗数据以及关闭弹窗的 close 方法(如果使用了内置表单,则ref为表单实例,同时表单数据也会通过插槽参数传递出来)。
使用内置表单
⚠️ 注意
slots.default 不能与 formItems参数不能同时设置
配置 formItems 参数,可以快速生成一个内置表单, 同时可以设置 formAttrs 参数来设置表单参数。
内置表单+默认底部按钮时, 可以通过 confirm 和 cancel 设置按钮触的回调函数。
API
Props
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| id | 弹窗唯一标识 | string | - |
| attrs | 弹窗参数,支持KDialog组件的所有props参数 | object | - |
| slots | 弹窗插槽,可使用header、default、footer、footerLeft等自定义渲染函数设置弹窗内容,设置default后将无法使用内置表单 | object | - |
| formAttrs | 使用内置表单时生效,设置表单参数,支持KForm组件的所有props参数 | object | - |
| formItems | 设置表单项,支持KFormItem组件的所有props参数,设置后可使用内置表单 | array | - |
| penetratePointer | 弹窗打开时是否支持弹窗下方内容的事件穿透 | boolean | false |
| showDefaultFooter | 是否显示弹窗默认底部内容 | boolean | true |
| showCancelButton | 是否显示取消按钮 | boolean | true |
| showConfirmButton | 是否显示确认按钮 | boolean | true |
| confirmButtonText | 确认按钮文字 | string | - |
| cancelButtonText | 取消按钮文字 | string | - |
| confirm | 点击确认按钮时触发的回调函数 | Function | - |
| cancel | 点击取消按钮时触发的回调函数 | Function | - |
| confirmButtonProps 1.2.5 | 确认按钮配置,参考KButton组件的 props 参数 | object | - |
| cancelButtonProps 1.2.5 | 取消按钮配置,参考KButton组件的 props 参数 | object | - |
FormItemOptions
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| type | 表单项类型,支持select、input、checkbox、checkboxGroup、radio、radioGroup、treeSelect类型 | enum | - |
| attrs | 内置表单项的select、input、checkbox等控件属性 | any | - |
| value | 表单项值 | any | - |
| render | 自定义渲染函数 | Function | - |
| noFormItemWrap | 表单项是否不包裹在FormItem组件中 | boolean | false |
| options | 选项列表,当type为select、checkboxGroup、radioGroup时生效 | object | - |
DialogSlots
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| header | 自定义弹窗头部内容 | Function | - |
| default | 自定义弹窗内容 | Function | - |
| footer | 自定义弹窗底部内容 | Function | - |
| footerLeft | 自定义弹窗底部左侧内容 | Function | - |