函式呼叫
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
});
非同步關閉
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: '彈窗內容'
    });
  }
}
元件呼叫
如果需要在彈窗內嵌入元件或其他自定義內容，可以使用元件呼叫的方式

<van-dialog v-model="show" title="標題" show-cancel-button>
  <img src="https://img.yzcdn.cn/vant/apple-3.jpg" rel="external nofollow" >
</van-dialog>
export default {
  data() {
    return {
      show: false
    };
  }
}
API
方法
Dialog    展示彈窗    options    Promise
Dialog.alert    展示訊息提示彈窗    options    Promise
Dialog.confirm    展示訊息確認彈窗    options    Promise
Dialog.setDefaultOptions    修改預設配置，對所有 Dialog 生效    options    void
Dialog.resetDefaultOptions    重置預設配置，對所有 Dialog 生效    -    void
Dialog.close    關閉彈窗    -    void
Options
通過函式呼叫 Dialog 時，支援傳入以下選項：

title    標題    string    -
width v2.2.7    彈窗寬度，預設單位為px    number | string    320px
message    文字內容，支援通過\n換行    string    -
messageAlign    內容對齊方式，可選值為left right    string    center
className    自定義類名    any    -
showConfirmButton    是否展示確認按鈕    boolean    true
showCancelButton    是否展示取消按鈕    boolean    false
confirmButtonText    確認按鈕文案    string    確認
confirmButtonColor    確認按鈕顏色    string    #1989fa
cancelButtonText    取消按鈕文案    string    取消
cancelButtonColor    取消按鈕顏色    string    black
overlay    是否展示遮罩層    boolean    true
overlayClass v2.2.7    自定義遮罩層類名    string    -
overlayStyle v2.2.7    自定義遮罩層樣式    object    -
closeOnPopstate v2.0.5    是否在頁面回退時自動關閉    boolean    false
closeOnClickOverlay    是否在點選遮罩層後關閉彈窗    boolean    false
lockScroll    是否鎖定背景滾動    boolean    true
beforeClose    關閉前的回撥函式，
呼叫 done() 後關閉彈窗，
呼叫 done(false) 阻止彈窗關閉    (action, done) => void    -
transition v2.2.6    動畫類名，等價於 transtion 的name屬性    string    -
getContainer    指定掛載的節點，用法示例    string | () => Element    body
Props
通過元件呼叫 Dialog 時，支援以下 Props：

v-model    是否顯示彈窗    boolean    -
title    標題    string    -
width v2.2.7    彈窗寬度，預設單位為px    number | string    320px
message    文字內容，支援通過\n換行    string    -
message-align    內容對齊方式，可選值為left right    string    center
show-confirm-button    是否展示確認按鈕    boolean    true
show-cancel-button    是否展示取消按鈕    boolean    false
confirm-button-text    確認按鈕文案    string    確認
confirm-button-color    確認按鈕顏色    string    #1989fa
cancel-button-text    取消按鈕文案    string    取消
cancel-button-color    取消按鈕顏色    string    black
overlay    是否展示遮罩層    boolean    true
overlay-class v2.2.7    自定義遮罩層類名    string    -
overlay-style v2.2.7    自定義遮罩層樣式    object    -
close-on-popstate v2.0.5    是否在頁面回退時自動關閉    boolean    false
close-on-click-overlay    是否在點選遮罩層後關閉彈窗    boolean    false
lazy-render    是否在顯示彈層時才渲染節點    boolean    true
lock-scroll    是否鎖定背景滾動    boolean    true
before-close    關閉前的回撥函式，
呼叫 done() 後關閉彈窗，
呼叫 done(false) 阻止彈窗關閉    (action, done) => void    -
transition v2.2.6    動畫類名，等價於 transtion 的name屬性    string    -
get-container    指定掛載的節點，用法示例    string | () => Element    -
Events
通過元件呼叫 Dialog 時，支援以下事件：

confirm    點選確認按鈕時觸發    -
cancel    點選取消按鈕時觸發    -
open    開啟彈窗時觸發    -
opened    開啟彈窗且動畫結束後觸發    -
close    關閉彈窗時觸發    -
closed    關閉彈窗且動畫結束後觸發    -
Slots
通過元件呼叫 Dialog 時，支援以下插槽：

default    自定義內容
title    自定義標題