Vant3 Dialog 彈出框

Dialog 彈出框

介紹

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

實例演示

函數調用

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

import { Dialog } from 'vant';

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

組件調用

通過組件調用 Dialog 時，可以通過下面的方式進行注冊：

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

// 全局注冊
const app = createApp();
app.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
  });

圓角按鈕風格

將 theme 選項設置為 round-button 可以展示圓角按鈕風格的彈窗。

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

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

異步關閉

通過 beforeClose 屬性可以傳入一個回調函數，在彈窗關閉前進行特定操作。

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

Dialog.confirm({
  title: '標題',
  message: '彈窗內容',
  beforeClose,
});

全局方法

通過 app.use 全局注冊 Dialog 組件后，會自動在 app 的所有子組件上掛載 $dialog 方法，在所有組件內部都可以直接調用此方法。

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

Tips: 由于 setup 選項中無法訪問 this，因此不能使用上述方式，請通過 import 引入。

組件調用

如果需要在彈窗內嵌入組件或其他自定義內容，可以使用組件調用的方式。

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

import { ref } from 'vue';

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

API

方法

DialogOptions

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

Props

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

Events

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

Slots

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

樣式變量

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

常見問題

在 beforeRouteLeave 里調用 Dialog 無法展示？

將 closeOnPopstate 屬性設置為 false 即可。

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

在 JSX 中渲染 Dialog 組件無法展示？

請注意 Dialog 是一個函數，Dialog.Component 才是 Dialog 對應的組件。JSX 調用彈窗的正確姿勢如下：

export default {
  setup() {
    const show = ref(false);
    return () => <Dialog.Component v-model={[show, 'show']} />;
  },
};