首页 > API文档 > JavaScript API
弹层
更新时间: 2021-12-08 11:38:34

弹层

Alert

Alert 基于 Dialog 扩展而来

Demo





Props

参数说明类型默认值
button-text可选,按钮文字StringOK
dialog-transition可选,弹窗动画(CSS3 自定义动画, 通过类名指定)String
mask-transition可选,遮罩动画(CSS3 自定义动画, 通过类名指定)String
show必选,是否显示,双向绑定Booleanfalse
title必选,提示标题String

Slots

名字说明
默认slot可选,提示消息内容(DOM 元素, 可根据具体业务自行定制)

Events

自定义事件名参数描述
on-show显示时触发
on-hide关闭时触发

Confirm

Confirm 基于 Dialog 扩展而来, 用于需要用户确认操作的情况

Demo





Props

参数说明类型默认值
cancel-text可选,取消按钮文字Stringcancel
confirm-text可选,确认按钮文字Stringconfirm
dialog-transition可选,弹窗动画(CSS3 自定义动画, 通过类名指定)String
mask-transition可选,遮罩动画(CSS3 自定义动画, 通过类名指定)String
show必选,是否显示,双向绑定Booleanfalse
title必选,提示标题String

Slots

名字说明
默认slot可选,提示消息内容(DOM 元素, 可根据具体业务自行定制)

Events

自定义事件名参数描述
on-confirm确认时触发
on-cancel取消时触发

Dialog

Demo





Props

参数说明类型默认值
dialog-transition可选,弹窗动画(CSS3 自定义动画, 通过类名指定)Stringuik-dialog
mask-transition可选,遮罩动画(CSS3 自定义动画, 通过类名指定)Stringuik-fade
show是否显示,双向绑定Booleanfalse

Slots

名字说明
默认slot弹窗主体内容

Events

自定义事件名参数描述
on-show显示时触发
on-hide关闭时触发

Loading

Demo



Props

参数说明类型默认值
show是否显示,双向绑定Booleanfalse
text提示文字,与默认slot作用一致StringLoading

Slots

名字说明
默认slot提示文字,和text属性功能一致,若提示文字带有HTML标签,则选择slot方式

Toast

Demo



Props

参数说明类型默认值
show是否显示,双向绑定Booleanfalse
time显示时间Number2000(ms)
transition过渡动画Stringsuccess
type图标类型,可选为success,text,cancel,warnString
widthToast宽度String7.6em

尽管Toast组件提供了 cancelwarn 类型,但不推荐使用,如果需要用户关注的通知推荐使用 Alert或者 Confirm 组件

Slots

名字说明
默认slot提示文字