更新记录
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按钮。

收藏人数:
下载插件并导入HBuilderX
下载示例项目ZIP
赞赏(0)
下载 118
赞赏 1
下载 11035362
赞赏 1800
赞赏
京公网安备:11010802035340号