更新记录
1.0.0(2023-12-16) 下载此版本
首次更新,modal 模态框
平台兼容性
Vue2 | Vue3 |
---|---|
√ | × |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
× | × | × | × | × | × | × |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|
× | × | × | × |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
× | × | × | × | × | × | × | × | × |
Slots
插槽名称 | 说明 |
---|---|
default | 模态框自定义内容 |
Props
属性名 | 类型 | 说明 | 默认值 | 平台差异说明 |
---|---|---|---|---|
show | Boolean | 是否显示模态框 | false | - |
title | String | 标题 | - | - |
size | Number, String | 标题字体大小,单位rpx | 34 | - |
color | String | 标题字体颜色 | #333 | - |
descr | String | 描述内容 | - | - |
descrSize | Number, String | 描述内容字体大小,单位rpx | 28 | - |
descrColor | String | 描述内容字体颜色 | #7F7F7F | - |
buttons | Array | 操作按钮,数据格式见下方说明 | [{text: '取消',plain: true}, {text: '确定'}] | - |
direction | String | 操作按钮排列方向,可选值:row、column | row | - |
radius | Number, String | 按钮圆角值,单位rpx | 16 | - |
width | Number, String | 模态框宽度,单位rpx | 640 | - |
background | String | 模态框背景色 | #FFFFFF | - |
boxRadius | Number, String | 模态框圆角值,单位rpx | 16 | - |
padding V1.8.0+ | Number, String | 模态框上下padding值,单位rpx | 32 | - |
maskBackground | String | 遮罩背景色 | rgba(0,0,0,.6) | - |
maskClosable | Boolean | 点击遮罩是否可关闭模态框(设为true时,需结合@cancel事件,通过设置show为false关闭模态框) | false | - |
zIndex | Number | 模态框z-index值 | 996 | Nvue端不支持,默认越靠后的元素层级越高,即将组件放置最底部 |
Events
事件名 | 说明 | 回调参数 |
---|---|---|
@click | 点击模态框按钮时触发 | { index:按钮索引, ...this.buttons[index] } |
@cancel | 点击遮罩层(maskClosable=true)时触发 | - |