介紹

彈出模態框，常用于消息提示、消息確認，或在當前頁面內完成特定的交互操作。

彈出框組件支持函數調用和組件調用兩種方式。

函數調用

Dialog 是一個函數，調用后會直接在頁面中彈出相應的模態框。

import { Dialog } from 'vant';Dialog({ message: '提示' });

組件調用

通過組件調用 Dialog 時，可以通過下面的方式進行注冊：

import Vue from 'vue';import { Dialog } from 'vant';// 全局注冊Vue.use(Dialog);// 局部注冊export default { components: { [Dialog.Component.name]: Dialog.Component, },};

代碼演示

消息提示

用于提示一些消息，只包含一個確認按鈕。

Dialog.alert({ title: '標題', message: '彈窗內容',}).then(() => { // on close});Dialog.alert({ message: '彈窗內容',}).then(() => { // on close});

消息確認

用于確認消息，包含取消和確認按鈕。

Dialog.confirm({ title: '標題', message: '彈窗內容',}) .then(() => { // on confirm }) .catch(() => { // on cancel });

異步關閉

通過 beforeClose 屬性可以傳入一個回調函數，在彈窗關閉前進行特定操作。

function beforeClose(action, done) { if (action === 'confirm') { setTimeout(done, 1000); } else { done(); }}Dialog.confirm({ title: '標題', message: '彈窗內容', beforeClose,});

全局方法

引入 Dialog 組件后，會自動在 Vue 的 prototype 上掛載 $dialog 方法，在所有組件內部都可以直接調用此方法。

export default { mounted() { this.$dialog.alert({ message: '彈窗內容', }); },};

組件調用

如果需要在彈窗內嵌入組件或其他自定義內容，可以使用組件調用的方式。

export default { data() { return { show: false, }; },};

API

方法

方法名說明參數返回值Dialog展示彈窗optionsPromiseDialog.alert展示消息提示彈窗optionsPromiseDialog.confirm展示消息確認彈窗optionsPromiseDialog.setDefaultOptions修改默認配置，對所有 Dialog 生效optionsvoidDialog.resetDefaultOptions重置默認配置，對所有 Dialog 生效-voidDialog.close關閉彈窗-void

Options

通過函數調用 Dialog 時，支持傳入以下選項：

參數說明類型默認值title標題string-width v2.2.7彈窗寬度，默認單位為pxnumber | string320pxmessage文本內容，支持通過換行string-messageAlign內容對齊方式，可選值為left rightstringcenterclassName自定義類名any-showConfirmButton是否展示確認按鈕booleantrueshowCancelButton是否展示取消按鈕booleanfalseconfirmButtonText確認按鈕文案string確認confirmButtonColor確認按鈕顏色string#1989facancelButtonText取消按鈕文案string取消cancelButtonColor取消按鈕顏色stringblackoverlay是否展示遮罩層booleantrueoverlayClass v2.2.7自定義遮罩層類名string-overlayStyle v2.2.7自定義遮罩層樣式object-closeOnPopstate v2.0.5是否在頁面回退時自動關閉booleanfalsecloseOnClickOverlay是否在點擊遮罩層后關閉彈窗booleanfalselockScroll是否鎖定背景滾動booleantrueallowHtml v2.8.7是否允許 message 內容中渲染 HTMLbooleantruebeforeClose關閉前的回調函數，
調用 done() 后關閉彈窗，
調用 done(false) 阻止彈窗關閉(action, done) => void-transition v2.2.6動畫類名，等價于 transtion 的name屬性string-getContainer指定掛載的節點，用法示例string | () => Elementbody

Props

通過組件調用 Dialog 時，支持以下 Props：

參數說明類型默認值v-model是否顯示彈窗boolean-title標題string-width v2.2.7彈窗寬度，默認單位為pxnumber | string320pxmessage文本內容，支持通過換行string-message-align內容對齊方式，可選值為left rightstringcentershow-confirm-button是否展示確認按鈕booleantrueshow-cancel-button是否展示取消按鈕booleanfalseconfirm-button-text確認按鈕文案string確認confirm-button-color確認按鈕顏色string#1989facancel-button-text取消按鈕文案string取消cancel-button-color取消按鈕顏色stringblackoverlay是否展示遮罩層booleantrueoverlay-class v2.2.7自定義遮罩層類名string-overlay-style v2.2.7自定義遮罩層樣式object-close-on-popstate v2.0.5是否在頁面回退時自動關閉booleanfalseclose-on-click-overlay是否在點擊遮罩層后關閉彈窗booleanfalselazy-render是否在顯示彈層時才渲染節點booleantruelock-scroll是否鎖定背景滾動booleantrueallow-html v2.8.7是否允許 message 內容中渲染 HTMLbooleantruebefore-close關閉前的回調函數，
調用 done() 后關閉彈窗，
調用 done(false) 阻止彈窗關閉(action, done) => void-transition v2.2.6動畫類名，等價于 transtion 的name屬性string-get-container指定掛載的節點，用法示例string | () => Element-

Events

通過組件調用 Dialog 時，支持以下事件：

事件說明回調參數confirm點擊確認按鈕時觸發-cancel點擊取消按鈕時觸發-open打開彈窗時觸發-close關閉彈窗時觸發-opened打開彈窗且動畫結束后觸發-closed關閉彈窗且動畫結束后觸發-

Slots

通過組件調用 Dialog 時，支持以下插槽：

名稱說明default自定義內容title自定義標題

總結

以上是生活随笔為你收集整理的自动关闭模态框_Dialog 弹出框的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。