Dialog popup box

introduce

Pop-up modal boxes are often used for message prompts, message confirmation, or to complete specific interactive operations within the current page. Supports both component calling and function calling.

Function call

In order to facilitate the use of Dialog, zebra provides a series of auxiliary functions through which global pop-up components can be quickly evoked.

For example, using the showDialog function, the corresponding pop-up box will be rendered directly on the page after being called.

import { useDialog } from '../../uni_modules/zebra-ui'
const dialog = useDialog()
dialog.showDialog({ title: 'Title', message: 'This is a sample prompt' })

notification

Used to prompt some messages, which only contains a confirmation button by default.

import { useDialog } from '../../uni_modules/zebra-ui'
const dialog = useDialog()

dialog.showDialog({ title: 'Title', message: 'This is a sample prompt' })

Message confirmation

Used to confirm messages, including confirm and cancel buttons by default.

dialog.showConfirmDialog({
   title: 'title',
   message: 'This is a sample prompt'
})

Rounded button style

Set the theme option to round-button to display a rounded button style popup.

dialog.showDialog({
   title: 'title',
   theme: 'round-button',
   message: 'This is a sample prompt'
})

Asynchronous shutdown

A callback function can be passed in through the beforeClose attribute to perform specific operations before the pop-up window is closed.

const showDialogMethod = () => {
   dialog.showConfirmDialog({
     title: 'title',
     message: 'Asynchronous shutdown example',
     beforeClose
   })
}
const beforeClose = (action: any) =>
   new Promise((resolve) => {
     setTimeout(() => {
       // action !== 'confirm' intercepts the cancellation operation
       resolve(action === 'confirm')
     }, 1000)
   })

Using Dialog component

If you need to embed components or other custom content within Dialog, you can use the Dialog component directly and use the default slots for customization.

<z-dialog
   v-model:show="show"
   use-component
   title="title"
   show-cancel-button
>
   <z-picker :columns="columns" :show-toolbar="false" />
</z-dialog>

import { ref } from 'vue';
const show = ref(false);

method

Zebra exports the following Dialog-related auxiliary functions:

DialogOptions

When calling methods such as showDialog, the following options are supported:

Props

When calling Dialog through a component, the following Props are supported:

Events

When calling Dialog through a component, the following events are supported:

Slots

When calling Dialog through a component, the following slots are supported:

Style variables

The component provides the following CSS variables, which can be used to customize styles. For usage, please refer to ConfigProvider component.