Dialog 弹出框
介绍
弹出模态框,常用于消息提示、消息确认,或在当前页面内完成特定的交互操作。支持组件调用和函数调用两种方式。
函数调用
为了便于使用 Dialog
,zebra 提供了一系列辅助函数,通过辅助函数可以快速唤起全局的弹窗组件。
比如使用 showDialog
函数,调用后会直接在页面中渲染对应的弹出框。
import { useDialog } from '../../uni_modules/zebra-ui'
const dialog = useDialog()
dialog.showDialog({ title: '标题', message: '这是一个示例提示' })
代码演示
消息提示
用于提示一些消息,默认只包含一个确认按钮。
import { useDialog } from '../../uni_modules/zebra-ui'
const dialog = useDialog()
dialog.showDialog({ title: '标题', message: '这是一个示例提示' })
圆角按钮风格
将 theme 选项设置为 round-button
可以展示圆角按钮风格的弹窗。
dialog.showDialog({
title: '标题',
theme: 'round-button',
message: '这是一个示例提示'
})
异步关闭
通过 beforeClose
属性可以传入一个回调函数,在弹窗关闭前进行特定操作。
const showDialogMethod = () => {
dialog.showConfirmDialog({
title: '标题',
message: '异步关闭示例',
beforeClose
})
}
const beforeClose = (action: any) =>
new Promise((resolve) => {
setTimeout(() => {
// action !== 'confirm' 拦截取消操作
resolve(action === 'confirm')
}, 1000)
})
使用 Dialog 组件
如果你需要在 Dialog 内嵌入组件或其他自定义内容,可以直接使用 Dialog 组件,并使用默认插槽进行定制。
<z-dialog
v-model:show="show"
use-component
title="标题"
show-cancel-button
>
<z-picker :columns="columns" :show-toolbar="false" />
</z-dialog>
import { ref } from 'vue';
const show = ref(false);
API
方法
zebra 中导出了以下 Dialog 相关的辅助函数:
方法名 | 说明 | 参数 | 返回值 |
---|---|---|---|
showDialog | 展示消息提示弹窗,默认包含确认按钮 | options: DialogOptions | Promise<void> |
showConfirmDialog | 展示消息确认弹窗,默认包含确认和取消按钮 | options: DialogOptions | Promise<void> |
closeDialog | 关闭当前展示的弹窗 | - | void |
setDialogDefaultOptions | 修改默认配置,影响所有的 showDialog 调用 | options: DialogOptions | void |
resetDialogDefaultOptions | 重置默认配置,影响所有的 showDialog 调用 | - | void |
DialogOptions
调用 showDialog
等方法时,支持传入以下选项:
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
title | 标题 | string | - |
width | 弹窗宽度,默认单位为 px | number | string | 320px |
message | 文本内容 | string | - |
messageAlign | 内容对齐方式,可选值为 left right | string | center |
theme | 样式风格,可选值为 round-button | string | default |
className | 自定义类名 | string | Array | object | - |
showConfirmButton | 是否展示确认按钮 | boolean | true |
showCancelButton | 是否展示取消按钮 | boolean | false |
confirmButtonText | 确认按钮文案 | string | 确认 |
confirmButtonColor | 确认按钮颜色 | string | #ee0a24 |
confirmButtonDisabled | 是否禁用确认按钮 | boolean | false |
cancelButtonText | 取消按钮文案 | string | 取消 |
cancelButtonColor | 取消按钮颜色 | string | black |
cancelButtonDisabled | 是否禁用取消按钮 | boolean | false |
overlay | 是否展示遮罩层 | boolean | true |
overlayClass | 自定义遮罩层类名 | string | Array | object | - |
overlayStyle | 自定义遮罩层样式 | object | - |
closeOnClickOverlay | 是否在点击遮罩层后关闭弹窗 | boolean | false |
lockScroll | 是否锁定背景滚动 | boolean | true |
beforeClose | 关闭前的回调函数,返回 false 可阻止关闭,支持返回 Promise | (action: string) => boolean | Promise<boolean> | - |
transition | 动画类名,等价于 transition 的 name 属性 | string | - |
Props
通过组件调用 Dialog
时,支持以下 Props:
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
v-model:show | 是否显示弹窗 | boolean | - |
title | 标题 | string | - |
width | 弹窗宽度,默认单位为 px | number | string | 640rpx |
message | 文本内容 | string | - |
message-align | 内容水平对齐方式,可选值为 left right justify | string | center |
theme | 样式风格,可选值为 round-button | string | default |
show-confirm-button | 是否展示确认按钮 | boolean | true |
show-cancel-button | 是否展示取消按钮 | boolean | false |
confirm-button-text | 确认按钮文案 | string | 确认 |
confirm-button-color | 确认按钮颜色 | string | #ee0a24 |
confirm-button-disabled | 是否禁用确认按钮 | boolean | false |
cancel-button-text | 取消按钮文案 | string | 取消 |
cancel-button-color | 取消按钮颜色 | string | black |
cancel-button-disabled | 是否禁用取消按钮 | boolean | false |
z-index | 将弹窗的 z-index 层级设置为一个固定值 | number | string | 2000+ |
overlay | 是否展示遮罩层 | boolean | true |
overlay-class | 自定义遮罩层类名 | string | - |
overlay-style | 自定义遮罩层样式 | object | - |
close-on-click-overlay | 是否在点击遮罩层后关闭弹窗 | boolean | false |
lock-scroll | 是否锁定背景滚动 | boolean | true |
before-close | 关闭前的回调函数,返回 false 可阻止关闭,支持返回 Promise | (action: string) => boolean | Promise<boolean> | - |
transition | 动画类名,等价于 transition 的 name 属性 | string | - |
Events
通过组件调用 Dialog
时,支持以下事件:
事件名 | 说明 | 回调参数 |
---|---|---|
confirm | 点击确认按钮时触发 | - |
cancel | 点击取消按钮时触发 | - |
open | 打开弹窗时触发 | - |
close | 关闭弹窗时触发 | - |
opened | 打开弹窗且动画结束后触发 | - |
closed | 关闭弹窗且动画结束后触发 | - |
主题定制
样式变量
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 ConfigProvider 组件。
名称 | 默认值 | 描述 |
---|---|---|
--z-dialog-width | 640rpx | - |
--z-dialog-small-screen-width | 90% | - |
--z-dialog-font-size | var(--z-font-size-lg) | - |
--z-dialog-transition | var(--z-duration-base) | - |
--z-dialog-radius | 32rpx | - |
--z-dialog-background | var(--z-background-2) | - |
--z-dialog-header-font-weight | var(--z-font-bold) | - |
--z-dialog-header-line-height | 48rpx | - |
--z-dialog-header-padding-top | 52rpx | - |
--z-dialog-header-isolated-padding | var(--z-padding-lg) 0 | - |
--z-dialog-message-padding | var(--z-padding-lg) | - |
--z-dialog-message-font-size | var(--z-font-size-md) | - |
--z-dialog-message-line-height | var(--z-line-height-md) | - |
--z-dialog-message-max-height | 60vh | - |
--z-dialog-has-title-message-text-color | var(--z-gray-7) | - |
--z-dialog-has-title-message-padding-top | var(--z-padding-xs) | - |
--z-dialog-button-height | 96rpx | - |
--z-dialog-round-button-height | 72rpx | - |
--z-dialog-confirm-button-text-color | var(--z-primary-color) | - |