弹出模态框,常用于消息提示、消息确认,或在当前页面内完成特定的交互操作。
弹出框组件支持函数调用和组件调用两种方式。
注意:使用时必须在所使用的页面加入如下内容(ref名称不可更改):
<z-dialog ref="zDialog" />
Dialog 是一个函数,调用后会直接在页面中弹出相应的模态框。
this.$dialog.alert({
title: '标题',
message: '我是zebra-ui里的弹出框,我长得很漂亮',
});
组件内部提供了options
参数来对模态框进行配置。
<z-dialog
:options="{'title':'标题','useSlot':true,'show':show,'show-cancel-button':true,'confirm-button-open-type':'getUserInfo'}"
@close="onClose" @getuserinfo="getUserInfo">
<view class="demo-dialog-text">
自定义内容
</view>
</z-dialog>
用于提示一些消息,只包含一个确认按钮。
this.$dialog.alert({
title: '标题',
message: '我是zebra-ui里的弹出框,我长得很漂亮',
});
this.$dialog.alert({
message: '我是zebra-ui里的弹出框,我长得很漂亮',
});
用于确认消息,包含取消和确认按钮。
this.$dialog.confirm({
title: '标题',
message: '我是zebra-ui里的弹出框,我长得漂亮吗?',
});
将 theme 选项设置为 round-button 可以展示圆角按钮风格的弹窗。
this.$dialog.alert({
title: '标题',
theme: 'round-button',
message: '我是zebra-ui里的弹出框,我长得很漂亮',
});
通过 beforeClose
属性可以传入一个回调函数,在弹窗关闭前进行特定操作。
const beforeClose = (action) =>
new Promise((resolve) => {
setTimeout(() => {
if (action === 'confirm') {
resolve(true);
} else {
// 拦截取消操作
resolve(false);
this.$toast("拦截取消操作")
}
}, 1000);
});
this.$dialog.confirm({
title: '标题',
message: '我是zebra-ui里的弹出框,我长得很漂亮',
beforeClose,
});
如果需要在弹窗内嵌入组件或其他自定义内容,可以使用组件调用的方式。
<z-dialog
:options="{'title':'标题','useSlot':true,'show':show,'show-cancel-button':true,'confirm-button-open-type':'getUserInfo'}"
@close="onClose" @getuserinfo="getUserInfo">
<view class="demo-dialog-text">
自定义内容
</view>
</z-dialog>
data() {
return {
show: false
}
},
方法名 | 说明 | 参数 | 返回值 |
---|---|---|---|
$dialog | 展示弹窗 | options |
Promise |
$dialog.alert | 展示消息提示弹窗 | options |
Promise |
$dialog.confirm | 展示消息确认弹窗 | options |
Promise |
$dialog.close | 关闭弹窗 | - | void |
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
title | 标题 | string | - | - |
width | 弹窗宽度,默认单位为px |
number|string | 320px |
|
message | 文本内容,支持通过\n 换行 |
string | - | |
messageAlign | 内容对齐方式 | string | left right |
center |
theme | 按钮样式 | string | default |
|
showConfirmButton | 是否展示确认按钮 | boolean | true |
|
showCancelButton | 是否展示取消按钮 | boolean | false |
|
confirmButtonText | 确认按钮文案 | string | 确认 |
|
confirmButtonColor | 确认按钮颜色 | string | #08c6c8 |
|
cancelButtonText | 取消按钮文案 | string | 取消 |
|
cancelButtonColor | 取消按钮颜色 | string | black |
|
overlay | 是否展示遮罩层 | boolean | true |
|
overlayStyle | 自定义遮罩层样式 | object | - | |
closeOnClickOverlay | 是否在点击遮罩层后关闭弹窗 | boolean | false |
|
beforeClose | 关闭前的回调函数,返回 false 可阻止关闭,支持返回 Promise |
(action)=>boolean|Promise |
- | |
transition | 动画名称 | string | fade none |
scale |
transition | 确认按钮的开放能力,具体支持可参考 uniapp官方文档 | string | - |
事件名 | 回调参数 | 说明 |
---|---|---|
close | event object - event event.detail: 触发关闭事件的来源,枚举为confirm ,cancel ,overlay |
弹窗关闭时触发 |
confirm | event object - event |
点击确认按钮时触发 |
cancel | event object - event |
点击取消按钮时触发 |
名称 | 说明 | Bindings |
---|---|---|
title | 自定义title 显示内容,如果设置了title 属性则不生效 |