vant彈窗提示

函數調用
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    自定義標題