弹层
更新时间：
2024-11-23 16:12:22
弹层
Alert
Alert 基于 Dialog 扩展而来
Demo
Props
| 参数 | 说明 | 类型 | 默认值 |
|---|
| button-text | 可选，按钮文字 | String | OK |
| dialog-transition | 可选，弹窗动画(CSS3 自定义动画, 通过类名指定) | String | 无 |
| mask-transition | 可选，遮罩动画(CSS3 自定义动画, 通过类名指定) | String | 无 |
| show | 必选，是否显示，双向绑定 | Boolean | false |
| title | 必选，提示标题 | String | 无 |
Slots
| 名字 | 说明 |
|---|
| 默认slot | 可选，提示消息内容(DOM 元素, 可根据具体业务自行定制) |
Events
| 自定义事件名 | 参数 | 描述 |
|---|
| on-show | 无 | 显示时触发 |
| on-hide | 无 | 关闭时触发 |
Confirm
Confirm 基于 Dialog 扩展而来, 用于需要用户确认操作的情况
Demo
Props
| 参数 | 说明 | 类型 | 默认值 |
|---|
| cancel-text | 可选，取消按钮文字 | String | cancel |
| confirm-text | 可选，确认按钮文字 | String | confirm |
| dialog-transition | 可选，弹窗动画(CSS3 自定义动画, 通过类名指定) | String | 无 |
| mask-transition | 可选，遮罩动画(CSS3 自定义动画, 通过类名指定) | String | 无 |
| show | 必选，是否显示，双向绑定 | Boolean | false |
| title | 必选，提示标题 | String | 无 |
Slots
| 名字 | 说明 |
|---|
| 默认slot | 可选，提示消息内容(DOM 元素, 可根据具体业务自行定制) |
Events
| 自定义事件名 | 参数 | 描述 |
|---|
| on-confirm | 无 | 确认时触发 |
| on-cancel | 无 | 取消时触发 |
Dialog
Demo
Props
| 参数 | 说明 | 类型 | 默认值 |
|---|
| dialog-transition | 可选，弹窗动画(CSS3 自定义动画, 通过类名指定) | String | uik-dialog |
| mask-transition | 可选，遮罩动画(CSS3 自定义动画, 通过类名指定) | String | uik-fade |
| show | 是否显示，双向绑定 | Boolean | false |
Slots
Events
| 自定义事件名 | 参数 | 描述 |
|---|
| on-show | 无 | 显示时触发 |
| on-hide | 无 | 关闭时触发 |
Loading
Demo
Props
| 参数 | 说明 | 类型 | 默认值 |
|---|
| show | 是否显示，双向绑定 | Boolean | false |
| text | 提示文字，与默认slot作用一致 | String | Loading |
Slots
| 名字 | 说明 |
|---|
| 默认slot | 提示文字，和text属性功能一致，若提示文字带有HTML标签，则选择slot方式 |
Toast
Demo
默认提示
处理成功
取消操作
禁止操作
1s关闭
Talk is cheap, show me the code.
Props
| 参数 | 说明 | 类型 | 默认值 |
|---|
| show | 是否显示，双向绑定 | Boolean | false |
| time | 显示时间 | Number | 2000(ms) |
| transition | 过渡动画 | String | success |
| type | 图标类型，可选为success,text,cancel,warn | String | 无 |
| width | Toast宽度 | String | 7.6em |
尽管Toast组件提供了 cancel 和 warn 类型，但不推荐使用，如果需要用户关注的通知推荐使用 Alert或者 Confirm 组件
Slots
请填写联系方式 