更新记录
1.0.3(2024-05-06)
下载此版本
兼容不支持Teleport、v-bind的平台
1.0.2(2024-03-22)
下载此版本
补充一些说明
1.0.1(2024-03-22)
下载此版本
修改一些说明
查看更多
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
HBuilderX 3.1.0 app-vue app-nvue |
√ |
√ |
√ |
√ |
√ |
√ |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
鸿蒙元服务 |
√ |
√ |
√ |
√ |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
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事件。
- cancel说明:
定义一个取消按钮,点击后调用oncancel事件。
- onconfirm():点击confirm按钮时触发。见属性confirm说明。
- oncancel():点击cancel按钮时触发。见属性cancel说明。
方法:
- open():打开对话框
- close():关闭对话框
插槽(slots):
- header:对话框标题栏。用于替代icon及title属性。
- default:对话框主体内容。
- footer:对话框按钮栏。用于替代confirm及cancel按钮。