更新记录
1.0.3(2024-05-06) 下载此版本
兼容不支持Teleport、v-bind的平台
1.0.2(2024-03-22) 下载此版本
补充一些说明
1.0.1(2024-03-22) 下载此版本
修改一些说明
查看更多平台兼容性
uni-app
Vue2 | Vue3 | Chrome | Safari | app-vue | app-nvue | Android | iOS | 鸿蒙 |
---|---|---|---|---|---|---|---|---|
× | √ | √ | √ | √ | √ | - | - | - |
微信小程序 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 京东小程序 | 鸿蒙元服务 | QQ小程序 | 飞书小程序 | 快应用-华为 | 快应用-联盟 |
---|---|---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | √ | √ | - | √ | √ | √ | √ |
其他
多语言 | 暗黑模式 | 宽屏模式 |
---|---|---|
× | × | √ |
outsider-dialog
功能说明:对话框,自动计算位置、宽、高,也支持自定义。详见属性说明。
注意:对不支持uni.createSelectorQuery().in()功能的支付宝小程序,不要同时打开多个对话框。
显示图标需<uni-icons>支持。
属性(props):
属性名称 | 类型 | 缺省值 | 说明 |
---|---|---|---|
teleport | HTMLElement或RefImpl | 页面根组件 | H5支持,其他平台无效。上级容器,确定背景掩盖范围及对话框最大高宽(position不能是static) |
icon | string | null | 标题栏图标 |
title | string | 标题文字 | |
close-box | boolean | true | 是否显示右上角关闭窗口的box |
head-style | string | 自定义对话框头部格式 | |
content | string | 不定义缺省slot时,显示于窗体的文字 | |
height | string | <自动计算> | 对话框高度 |
width | string | <自动计算> | 对话框宽度 |
show-header | boolean | true | 是否显示对话框标题栏 |
align | string | 'center' | 水平位置,可取值:left,center,right及自定义左距,比如“5em” |
valign | string | 'center' | 垂直位置,可取值:top,center,bottom及自定义顶距,比如“5em” |
confirm | object | null | 当不为空时,显示确定按钮。格式见下文。 |
cancel | object | null | 当不为空时,显示取消按钮。格式见下文。 |
mask-color | string | 'rgba(0,0,0,0.2)' | 掩盖背景的颜色,请使用rgba格式 |
- confirm说明:
定义一个确定按钮,点击后调用onconfirm事件。
- 对象格式:
{ text:string;//按钮文字,缺省为“确定” close:boolean;//执行完onconfirm事件后,是否自动关闭对话框。缺省为false ... //目前支持<button>的size type plain disabled loading属性 }
- 对象格式:
- cancel说明:
定义一个取消按钮,点击后调用oncancel事件。
- 对象格式:
{ text:string;//按钮文字,缺省为“取消” close:boolean;//执行完oncancel事件后,是否自动关闭对话框。缺省为true(与confirm不同) ... //目前支持<button>的size type plain disabled loading属性 }
事件(emits):
- 对象格式:
- onconfirm():点击confirm按钮时触发。见属性confirm说明。
- oncancel():点击cancel按钮时触发。见属性cancel说明。
方法:
- open():打开对话框
- close():关闭对话框
插槽(slots):
- header:对话框标题栏。用于替代icon及title属性。
- default:对话框主体内容。
- footer:对话框按钮栏。用于替代confirm及cancel按钮。