Vant4 Dialog 彈出框

介紹

彈出模態(tài)框，常用于消息提示、消息確認(rèn)，或在當(dāng)前頁(yè)面內(nèi)完成特定的交互操作。支持組件調(diào)用和函數(shù)調(diào)用兩種方式。

引入

通過(guò)以下方式來(lái)全局注冊(cè)組件，更多注冊(cè)方式請(qǐng)參考組件注冊(cè)。

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

const app = createApp();
app.use(Dialog);

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

為了便于使用 ?Dialog?，Vant 提供了一系列輔助函數(shù)，通過(guò)輔助函數(shù)可以快速喚起全局的彈窗組件。

比如使用 ?showDialog? 函數(shù)，調(diào)用后會(huì)直接在頁(yè)面中渲染對(duì)應(yīng)的彈出框。

import { showDialog } from 'vant';

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

代碼演示

消息提示

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

import { showDialog } from 'vant';

showDialog({
  title: '標(biāo)題',
  message: '代碼是寫出來(lái)給人看的，附帶能在機(jī)器上運(yùn)行。',
}).then(() => {
  // on close
});

showDialog({
  message: '生命遠(yuǎn)不止連軸轉(zhuǎn)和忙到極限，人類的體驗(yàn)遠(yuǎn)比這遼闊、豐富得多。',
}).then(() => {
  // on close
});

消息確認(rèn)

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

import { showConfirmDialog } from 'vant';

showConfirmDialog({
  title: '標(biāo)題',
  message:
    '如果解決方法是丑陋的，那就肯定還有更好的解決方法，只是還沒(méi)有發(fā)現(xiàn)而已。',
})
  .then(() => {
    // on confirm
  })
  .catch(() => {
    // on cancel
  });

圓角按鈕風(fēng)格

將 theme 選項(xiàng)設(shè)置為 ?round-button? 可以展示圓角按鈕風(fēng)格的彈窗。

import { showDialog } from 'vant';

showDialog({
  title: '標(biāo)題',
  message: '代碼是寫出來(lái)給人看的，附帶能在機(jī)器上運(yùn)行。',
  theme: 'round-button',
}).then(() => {
  // on close
});

showDialog({
  message: '生命遠(yuǎn)不止連軸轉(zhuǎn)和忙到極限，人類的體驗(yàn)遠(yuǎn)比這遼闊、豐富得多。',
  theme: 'round-button',
}).then(() => {
  // on close
});

異步關(guān)閉

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

import { showConfirmDialog } from 'vant';

const beforeClose = (action) =>
  new Promise((resolve) => {
    setTimeout(() => {
      if (action === 'confirm') {
        resolve(true);
      } else {
        // 攔截取消操作
        resolve(false);
      }
    }, 1000);
  });

showConfirmDialog({
  title: '標(biāo)題',
  message:
    '如果解決方法是丑陋的，那就肯定還有更好的解決方法，只是還沒(méi)有發(fā)現(xiàn)而已。',
  beforeClose,
});

使用 Dialog 組件

如果需要在 Dialog 內(nèi)嵌入組件或其他自定義內(nèi)容，可以直接使用 Dialog 組件，并使用默認(rèn)插槽進(jìn)行定制。使用前需要通過(guò) ?app.use? 等方式注冊(cè)組件。

<van-dialog v-model:show="show" title="標(biāo)題" show-cancel-button>
  <img src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg" rel="external nofollow"  />
</van-dialog>

import { ref } from 'vue';

export default {
  setup() {
    const show = ref(false);
    return { show };
  },
};

API

方法

Vant 中導(dǎo)出了以下 Dialog 相關(guān)的輔助函數(shù)：

DialogOptions

調(diào)用 ?showDialog? 等方法時(shí)，支持傳入以下選項(xiàng)：

Props

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

Events

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

Slots

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

類型定義

組件導(dǎo)出以下類型定義：

import type {
  DialogProps,
  DialogTheme,
  DialogMessage,
  DialogOptions,
  DialogMessageAlign,
} from 'vant';

主題定制

樣式變量

組件提供了下列 CSS 變量，可用于自定義樣式，使用方法請(qǐng)參考 ConfigProvider 組件。

常見(jiàn)問(wèn)題

引用 showDialog 時(shí)出現(xiàn)編譯報(bào)錯(cuò)？

如果引用 ?showDialog? 方法時(shí)出現(xiàn)以下報(bào)錯(cuò)，說(shuō)明項(xiàng)目中使用了 ?babel-plugin-import? 插件，導(dǎo)致代碼被錯(cuò)誤編譯。

These dependencies were not found:

* vant/es/show-dialog in ./src/xxx.js
* vant/es/show-dialog/style in ./src/xxx.js

Vant 從 4.0 版本開(kāi)始不再支持 ?babel-plugin-import? 插件，請(qǐng)參考 遷移指南 移除該插件。

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

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

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