DialogPlus | Press UI

# DialogPlus

The pop-up modal box is often used for message prompts, message confirmation, or to complete specific interactive operations in the current page, and supports function calls and component calls.

# Code Demo

# notification

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

<press-dialog id="press-dialog" />

import Dialog from 'press-ui/press-dialog-plus/handler';

Dialog.alert({
   title: 'Title',
   message: 'Pop-up window content',
}).then(() => {
   // on close
});

Dialog.alert({
   message: 'Pop-up window content',
}).then(() => {
   // on close
});

# Message Confirmation

Used for confirmation messages, containing cancel and confirm buttons.

<press-dialog id="press-dialog" />

import Dialog from 'press-ui/press-dialog-plus/handler';

Dialog.confirm({
   title: 'Title',
   message: 'Pop-up window content',
})
   .then(() => {
     // on confirm
   })
   .catch(() => {
     // on cancel
   });

# Rounded button style

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

<press-dialog id="press-dialog" />

import Dialog from 'press-ui/press-dialog-plus/handler';

Dialog.alert({
   title: 'Title',
   message: 'Pop-up window content',
   theme: 'round-button',
}).then(() => {
   // on close
});

Dialog.alert({
   message: 'Pop-up window content',
   theme: 'round-button',
}).then(() => {
   // on close
});

# Asynchronous shutdown

Through the beforeClose attribute, a callback function can be passed in to perform specific operations before the popup window is closed.

<press-dialog id="press-dialog" />

import Dialog from 'press-ui/press-dialog-plus/handler';

const beforeClose = (action) => new Promise((resolve) => {
   setTimeout(() => {
     if (action === 'confirm') {
       resolve(true);
     } else {
       // intercept cancel operation
       resolve(false);
     }
   }, 1000);
});

Dialog.confirm({
   title: 'Title',
   message: 'popup content'
   beforeClose
});

# Component call

If you need to embed components or other custom content in the pop-up window, you can use the component call method.

<press-dialog
   use-slot
   title="title"
   :show="show"
   show-cancel-button
   confirm-button-open-type="getUserInfo"
   @close="onClose"
   @getuserinfo="getUserInfo"
>
   <img src="https://img.yzcdn.cn/1.jpg" />
</press-dialog>

export default {
   data() {
     return {
       show: true,
     }
   },
   methods: {
     getUserInfo(detail) {
       console. log(detail);
     },

     onClose() {
       this. show = false;
     },
   }
};

# API

# method

method name	parameters	return value	description
Dialog	`options`	`Promise`	Show popup
Dialog.alert	`options`	`Promise`	Show message alert popup
Dialog.confirm	`options`	`Promise`	Show message confirmation popup
Dialog.setDefaultOptions	`options`	`void`	Modify the default configuration, effective for all Dialogs
Dialog.resetDefaultOptions	-	`void`	Reset the default configuration, effective for all Dialogs
Dialog.close	-	`void`	close the popup
Dialog.stopLoading	-	`void`	The loading state of the stop button

# Options

When calling Dialog through a function, the following options are supported:

Parameter	Description	Type	Default
title	title	string	-
width	popup window width, the default unit is `px`	string \| number	`320px`
message	text content, support newline via `\n`	string	-
messageAlign	content alignment, optional values are `left` `right`	string	`center`
theme	style, optional value is `round-button`	string	`default`
zIndex	z-index level	number	`100`
className	Custom class name, invalid when dialog is inside a custom component	string	''
customStyle	custom style	string	''
selector	fromDefine selector	string	`press-dialog`
showConfirmButton	Whether to show the confirm button	boolean	`true`
showCancelButton	whether to show cancel button	boolean	`false`
confirmButtonText	Text of the confirm button	string	`Confirm`
cancelButtonText	Text of the cancel button	string	`Cancel`
overlay	Whether to show the overlay	boolean	`true`
overlayStyle	custom overlay style	object	-
closeOnClickOverlay	Whether to close the popup when the overlay is clicked	boolean	`false`
asyncClose	Deprecated, will be removed in 2.0.0, please use `beforeClose` attribute instead	boolean	`false`
beforeClose	callback function before closing, return `false` to prevent closing, support returning Promise	(action) => boolean \| Promise<boolean>	-
context	the selection range of the selector, you can pass in the this of the custom component as the context	object	the current page
transition	animation name, optional value is `fade` `none`	string	`scale`
confirmButtonOpenType	The WeChat open capability of the confirmation button, for specific support, please refer to WeChat Official Documentation (opens new window)	string	-

# OpenType Options

After using confirmButtonOpenType, the following options are supported:

parameter	description	type	default	open-type
appParameter	Parameter passed to APP when opening APP	string	-	`launchApp`
lang	Specifies the language to return user information, zh_CN Simplified Chinese, zh_TW Traditional Chinese, en English	string	`en`	`getUserInfo`
sessionFrom	session origin	string	-	`contact`
businessId	customer service message sub-merchant id	number	-	`contact`
sendMessageTitle	In-conversation message card title	string	current title	`contact`
sendMessagePath	In-conversation message card click to jump to the applet path	string	Current sharing path	`contact`
sendMessageImg	sendMessageImg	string	screenshot	`contact`
showMessageCard	Show in-conversation message card	string	`false`	`contact`

# Props

When calling Dialog through components, the following props are supported:

Parameter	Description	Type	Default
show	Whether to show the pop-up window	boolean	-
title	title	string	-
width	popup window width, the default unit is `px`	string \| number	`320px`
message	text content, support newline via `\n`	string	-
theme	style, optional value is `round-button`	string	`default`
message-align	content alignment, optional values are `left` `right`	string	`center`
z-index	z-index level	number	`100`
class-name	Custom class name, invalid when dialog is inside a custom component	string	''
custom-style	custom style	string	''
show-confirm-button	Whether to show the confirm button	boolean	`true`
show-cancel-button	Whether to show the cancel button	boolean	`false`
confirm-button-text	Text of the confirm button	string	`Confirm`
cancel-button-text	text of cancel button	string	`cancel`
confirm-button-color	font color of confirm button	string	`#ee0a24`
cancel-button-color	font color of cancel button	string	`#333`
overlay	Whether to show the overlay	boolean	`true`
overlay-style `v1.0.0`	custom overlay style	object	-
close-on-click-overlay	Whether to close the popup when the overlay is clicked	boolean	`false`
use-slot	Whether to use custom content slot	boolean	`false`
use-title-slot	Whether to use custom title slot	boolean	`false`
async-close	Deprecated, will be removed in 2.0.0, please use `beforeClose` attribute instead	boolean	`false`
before-close	callback function before close, return `false` to prevent close, support return Promise	(action) => boolean \| Promise<boolean>	-
transition	animation name, optional value is `fade`	string	`scale`
confirm-button-open-type	The WeChat open capability of the confirmation button, for specific support, please refer to WeChat official documents (opens new window)	string	-

# OpenType Props

After using confirm-button-open-type, the following props are supported:

| parameter | description | type | default | open-type | | --------- | ----------- | ---- | ------- | --------- || | | app-parameter | Parameter passed to APP when opening APP | string | - | launchApp | | lang | Specifies the language to return user information, zh_CN Simplified Chinese,
zh_TW Traditional Chinese, en English | string | en | getUserInfo | | session-from | session-from | string | - | contact | | business-id | Customer service message sub-merchant id | number | - | contact | | send-message-title | In-conversation message card title | string | Current title | contact | | send-message-path | In-conversation message card click to jump to the applet path | string | Current sharing path | contact | | send-message-img | sendMessageImg | string | screenshot | contact | | show-message-card | Show in-conversation message card | string | false | contact |

# Events

Event	Description	Callback Parameters
@close	Triggered when the pop-up window is closed	event.detail: The source that triggers the close event, enumerated as `confirm`, `cancel`, `overlay`
@confirm	Fired when the confirm button is clicked	-
@cancel	Fired when cancel button is clicked	-
@getuserinfo	When the confirm button is clicked, the obtained user information will be returned, The value obtained from the return parameter detail is the same as wx.getUserInfo	-
@contact	Customer service message callback	-
@getphonenumber	Callback to get the user's phone number	-
@error	An error callback occurred when using open capabilities	-
@opensetting	Callback after opening the authorization setting page	-

# Slot

Name	Description
title	Custom `title` display content, if the `title` attribute is set, it will not take effect

横屏

← ActionSheet DropdownMenu →