介紹

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

彈出框組件支持函數(shù)調用和組件調用兩種方式

函數(shù)調用

Dialog 是一個函數(shù)而不是組件，因此可以直接調用，展示對應的提示彈窗

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

方法

Options

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

Props

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

Events

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

Slots

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