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: '这是一个示例提示' })

消息确认

用于确认消息,默认包含确认和取消按钮。

dialog.showConfirmDialog({
  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: DialogOptionsPromise<void>
showConfirmDialog展示消息确认弹窗,默认包含确认和取消按钮options: DialogOptionsPromise<void>
closeDialog关闭当前展示的弹窗-void
setDialogDefaultOptions修改默认配置,影响所有的 showDialog 调用options: DialogOptionsvoid
resetDialogDefaultOptions重置默认配置,影响所有的 showDialog 调用-void

DialogOptions

调用 showDialog 等方法时,支持传入以下选项:

参数说明类型默认值
title标题string-
width弹窗宽度,默认单位为 pxnumber | string320px
message文本内容string-
messageAlign内容对齐方式,可选值为 left rightstringcenter
theme样式风格,可选值为 round-buttonstringdefault
className自定义类名string | Array | object-
showConfirmButton是否展示确认按钮booleantrue
showCancelButton是否展示取消按钮booleanfalse
confirmButtonText确认按钮文案string确认
confirmButtonColor确认按钮颜色string#ee0a24
confirmButtonDisabled是否禁用确认按钮booleanfalse
cancelButtonText取消按钮文案string取消
cancelButtonColor取消按钮颜色stringblack
cancelButtonDisabled是否禁用取消按钮booleanfalse
overlay是否展示遮罩层booleantrue
overlayClass自定义遮罩层类名string | Array | object-
overlayStyle自定义遮罩层样式object-
closeOnClickOverlay是否在点击遮罩层后关闭弹窗booleanfalse
lockScroll是否锁定背景滚动booleantrue
beforeClose关闭前的回调函数,返回 false 可阻止关闭,支持返回 Promise(action: string) => boolean | Promise<boolean>-
transition动画类名,等价于 transitionname 属性string-

Props

通过组件调用 Dialog 时,支持以下 Props:

参数说明类型默认值
v-model:show是否显示弹窗boolean-
title标题string-
width弹窗宽度,默认单位为 pxnumber | string640rpx
message文本内容string-
message-align内容水平对齐方式,可选值为 left right justifystringcenter
theme样式风格,可选值为 round-buttonstringdefault
show-confirm-button是否展示确认按钮booleantrue
show-cancel-button是否展示取消按钮booleanfalse
confirm-button-text确认按钮文案string确认
confirm-button-color确认按钮颜色string#ee0a24
confirm-button-disabled是否禁用确认按钮booleanfalse
cancel-button-text取消按钮文案string取消
cancel-button-color取消按钮颜色stringblack
cancel-button-disabled是否禁用取消按钮booleanfalse
z-index将弹窗的 z-index 层级设置为一个固定值number | string2000+
overlay是否展示遮罩层booleantrue
overlay-class自定义遮罩层类名string-
overlay-style自定义遮罩层样式object-
close-on-click-overlay是否在点击遮罩层后关闭弹窗booleanfalse
lock-scroll是否锁定背景滚动booleantrue
before-close关闭前的回调函数,返回 false 可阻止关闭,支持返回 Promise(action: string) => boolean | Promise<boolean>-
transition动画类名,等价于 transitionname 属性string-

Events

通过组件调用 Dialog 时,支持以下事件:

事件名说明回调参数
confirm点击确认按钮时触发-
cancel点击取消按钮时触发-
open打开弹窗时触发-
close关闭弹窗时触发-
opened打开弹窗且动画结束后触发-
closed关闭弹窗且动画结束后触发-

Slots

通过组件调用 Dialog 时,支持以下插槽:

名称说明
default自定义内容
title自定义标题
footer自定义底部按钮区域

主题定制

样式变量

组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 ConfigProvider 组件

名称默认值描述
--z-dialog-width640rpx-
--z-dialog-small-screen-width90%-
--z-dialog-font-sizevar(--z-font-size-lg)-
--z-dialog-transitionvar(--z-duration-base)-
--z-dialog-radius32rpx-
--z-dialog-backgroundvar(--z-background-2)-
--z-dialog-header-font-weightvar(--z-font-bold)-
--z-dialog-header-line-height48rpx-
--z-dialog-header-padding-top52rpx-
--z-dialog-header-isolated-paddingvar(--z-padding-lg) 0-
--z-dialog-message-paddingvar(--z-padding-lg)-
--z-dialog-message-font-sizevar(--z-font-size-md)-
--z-dialog-message-line-heightvar(--z-line-height-md)-
--z-dialog-message-max-height60vh-
--z-dialog-has-title-message-text-colorvar(--z-gray-7)-
--z-dialog-has-title-message-padding-topvar(--z-padding-xs)-
--z-dialog-button-height96rpx-
--z-dialog-round-button-height72rpx-
--z-dialog-confirm-button-text-colorvar(--z-primary-color)-