函數(shù)調(diào)用

Dialog 是一個函數(shù)，調(diào)用后會直接在頁面中彈出相應(yīng)的模態(tài)框。

import { Dialog } from 'vant';

Dialog({ message: '提示' });

組件調(diào)用

通過組件調(diào)用 Dialog 時，可以通過下面的方式進(jìn)行注冊：

import Vue from 'vue';
import { Dialog } from 'vant';

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

// 局部注冊
export default {
  components: {
    [Dialog.Component.name]: Dialog.Component,
  },
};

消息提示

用于提示一些消息，只包含一個確認(rèn)按鈕。

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

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

消息確認(rèn)

用于確認(rèn)消息，包含取消和確認(rèn)按鈕。

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

圓角按鈕風(fēng)格

將 theme 選項(xiàng)設(shè)置為 round-button 可以展示圓角按鈕風(fēng)格的彈窗，該選項(xiàng)從 2.10.0 版本開始支持。

Dialog.alert({
  title: '標(biāo)題',
  message: '彈窗內(nèi)容',
  theme: 'round-button',
}).then(() => {
  // on close
});

Dialog.alert({
  message: '彈窗內(nèi)容',
  theme: 'round-button',
}).then(() => {
  // on close
});

異步關(guān)閉

通過 beforeClose 屬性可以傳入一個回調(diào)函數(shù)，在彈窗關(guān)閉前進(jìn)行特定操作。

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

Dialog.confirm({
  title: '標(biāo)題',
  message: '彈窗內(nèi)容',
  beforeClose,
});

全局方法

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

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

組件調(diào)用

如果需要在彈窗內(nèi)嵌入組件或其他自定義內(nèi)容，可以使用組件調(diào)用的方式。

<van-dialog v-model="show" title="標(biāo)題" show-cancel-button>
  <img src="https://img01.yzcdn.cn/vant/apple-3.jpg" rel="external nofollow"  />
</van-dialog>

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

方法

Options

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

Props

通過組件調(diào)用 Dialog 時，支持以下 Props：

Events

通過組件調(diào)用 Dialog 時，支持以下事件：

Slots

通過組件調(diào)用 Dialog 時，支持以下插槽：

樣式變量

組件提供了下列 Less 變量，可用于自定義樣式，使用方法請參考主題定制。

在 beforeRouteLeave 里調(diào)用 Dialog 無法展示？

將 closeOnPopstate 屬性設(shè)置為 false 即可。

Dialog.alert({
  title: '標(biāo)題',
  message: '彈窗內(nèi)容',
  closeOnPopstate: false,
}).then(() => {
  // on close
});