Dialog 弹出框
引入
"usingComponents": {
"wr-dialog": "@retailwe/ui-dialog/index"
}
代码演示
基础用法
用于提示一些消息,只包含一个确认按钮
<wr-dialog
show="{{show3}}"
message="{{message}}"
bindconfirm="confirm"
showCancelButton="{{showCancelButton}}"
>
</wr-dialog>
Page({
data: {
show1: false,
show2: false,
show3: false,
show7: false,
show6: false,
title: '标题',
message: '弹框内容message',
showCancelButton: true,
},
handleTap(e) {
const { index } = e.currentTarget.dataset;
if (index == 5) {
Dialog.confirm({
title: '标题',
message: '编程式调用可以方便的回调~',
})
.then(() => {
Toast({
icon: 'success',
text: '回调: 确定',
});
})
.catch(() => {
Toast({
text: '回调: 取消',
});
});
} else {
this.setData({
['show' + index]: true,
});
}
},
dailogClose() {
this.setData({
show6: false,
});
},
});
API
Props
通过组件调用 Dialog 时,支持以下 Props:
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
show | 是否显示弹窗 | boolean | - |
title | 标题 | string | - |
message | 文本内容,支持通过\n 换行 |
string | - |
textAlign | message 的文本对齐方式 | 'center' |'left' |'right' |
'center' |
z-index | z-index 层级 | number | 100 |
showConfirmButton | 是否展示确认按钮 | boolean | true |
showCancelButton | 是否展示取消按钮 | boolean | false |
confirmButtonText | 确认按钮的文案 | string | 确认 |
cancelButtonText | 取消按钮的文案 | string | 取消 |
confirmOpenTypeValue | 确认按钮微信开放能力,可参考微信文档 | string | |
asyncClose | 是否支持异步关闭弹窗,开启后需要手动关闭弹窗 | boolean | false |
direction | 按钮排列方式 | _'row' |'column'
|
'row' |
actions | 按钮列表 | array | - |
// `actions` props:
interface Action {
name: string; // 按钮文案
primary?: boolean; // 是否主要按钮(颜色与其他按钮不同)
style?: string; // 自定义样式
}
Events
事件 | 说明 | 回调参数 |
---|---|---|
bindconfirm | 点击确认按钮时触发 | - |
bindcancel | 点击取消按钮时触发 | - |