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);

方法

zebra 中导出了以下 Dialog 相关的辅助函数：

DialogOptions

调用 showDialog 等方法时，支持传入以下选项：

Props

通过组件调用 Dialog 时，支持以下 Props：

Events

通过组件调用 Dialog 时，支持以下事件：

Slots

通过组件调用 Dialog 时，支持以下插槽：

样式变量

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