LightPopup
一个轻量级的前端弹窗组件
Alert
Confirm
Prompt
Message
Hint
Loading
全局参数/事件
全局参数
| 参数名 | 说明 | 默认值 | 数据类型 | 其他说明 |
|---|---|---|---|---|
| title | 标题 | 提示 | string,boolean | 传入false将不显示标题栏 |
| content | 内容 | string | ||
| buttons | 底部按钮 | array | 见下方buttons参数 | |
| icon | 图标 | string | ||
| className | 弹窗类名 | string | ||
| useHTML | title,content使用html代码 | false | boolean | |
| width | 弹窗宽度 | string | 例如：600px 或 80% 或 auto | |
| closeOnMaskClick | 点击遮罩关闭弹窗 | false | boolean | |
| maskOpacity | 遮罩透明度 | 0.5 | float,number | |
| autoClose | 自动关闭 | false | boolean,number | 单位ms，message,hint默认值为3000 |
buttons参数
| 参数 | 说明 | 默认值 | 数据类型 | 其他说明 |
|---|---|---|---|---|
| text | 按钮名称 | string | ||
| type | 按钮样式 | primary | string | 可选样式：default,primary,error,warning |
| onClick | 按钮点击后回调 | function | 接收参数：popup, [loadingOn, loadingOff] | |
| className | 按钮类名 | string,array |
全局事件
| 事件名 | 说明 | 数据类型 | 其他说明 |
|---|---|---|---|
| done | 弹窗插入页面 | function | 接收参数：popup(弹窗dom元素) |
| close | 弹窗关闭 | function | 接收参数：调用弹窗关闭方法所传入的参数 返回值：如果为false则阻止弹窗关闭（hint无法阻止关闭） |
| onClose | 点击关闭按钮 | function | 接收参数：popup(弹窗dom元素) 返回值：如果为false则阻止弹窗关闭 |
| onMaskClick | 点击遮罩 | function | 接收参数：popup(弹窗dom元素) 返回值：如果为false则阻止弹窗关闭 |
alert/confirm/prompt参数
| 参数名 | 说明 | 默认值 | 数据类型 | 其他说明 |
|---|---|---|---|---|
| confirmButtonText | 确认按钮名称 | 确定 | string | |
| confirmButtonType | 确认按钮类型 | primary | string | 可选样式：default,primary,error,warning |
| cancelButtonText | 取消按钮名称 | 取消 | string | |
| cancelButtonType | 取消按钮类型 | default | string | 可选样式：default,primary,error,warning |
alert/confirm/prompt事件
| 事件名 | 说明 | 数据类型 | 其他说明 |
|---|---|---|---|
| onConfirm | 点击确定按钮 | function | 接收参数：popup(弹窗dom元素), [loadingOn, loadingOff](按钮loading状态开启和关闭), value(prompt文本框内容) 返回值：如果为false则阻止弹窗关闭 |
| onCancel | 点击取消按钮 | function | 接收参数：popup(弹窗dom元素), [loadingOn, loadingOff](按钮loading状态开启和关闭) 返回值：如果为false则阻止弹窗关闭 |
弹窗返回值
| 名称 | 类型 | 说明 |
|---|---|---|
| el | element | 弹窗dom |
| close | function | 弹窗关闭 |
| animateTime | number | 弹窗进入或退出的动画时间，单位：ms |