Dialog 彈出框

介紹

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

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

函數調用

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

<code>import { Dialog } from 'vant';

Dialog({ message: '提示' });
/<code>

組件調用

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

<code>import Vue from 'vue';
import { Dialog } from 'vant';

// 全局註冊
Vue.use(Dialog);

// 局部註冊
export default {
  components: {
    [Dialog.Component.name]: Dialog.Component,
  },
};
/<code>

代碼演示

消息提示

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

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

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

消息確認

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

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

異步關閉

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

<code>function beforeClose(action, done) {
  if (action === 'confirm') {
    setTimeout(done, 1000);
  } else {
    done();
  }
}

Dialog.confirm({
  title: '標題',
  message: '彈窗內容',
  beforeClose,
});
/<code>

全局方法

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

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

組件調用

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

<code>
  

/<code> 

<code>export default {
  data() {
    return {
      show: false,
    };
  },
};
/<code>

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文本內容，支持通過\n換行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文本內容，支持通過\n換行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自定義標題