Vant4 Popup 彈出層

介紹

彈出層容器，用于展示彈窗、信息提示等內(nèi)容，支持多個(gè)彈出層疊加展示。

引入

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

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

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

代碼演示

基礎(chǔ)用法

通過(guò) ?v-model:show? 控制彈出層是否展示。

<van-cell is-link @click="showPopup">展示彈出層</van-cell>
<van-popup v-model:show="show">內(nèi)容</van-popup>

import { ref } from 'vue';

export default {
  setup() {
    const show = ref(false);
    const showPopup = () => {
      show.value = true;
    };
    return {
      show,
      showPopup,
    };
  },
};

彈出位置

通過(guò) ?position? 屬性設(shè)置彈出位置，默認(rèn)居中彈出，可以設(shè)置為 ?top?、?bottom?、?left?、?right?。

<van-popup v-model:show="show" position="top" :style="{ height: '30%' }" />

關(guān)閉圖標(biāo)

設(shè)置 ?closeable? 屬性后，會(huì)在彈出層的右上角顯示關(guān)閉圖標(biāo)，并且可以通過(guò) ?close-icon? 屬性自定義圖標(biāo)，使用 ?close-icon-position? 屬性可以自定義圖標(biāo)位置。

<van-popup
  v-model:show="show"
  closeable
  position="bottom"
  :style="{ height: '30%' }"
/>
<!-- 自定義圖標(biāo) -->
<van-popup
  v-model:show="show"
  closeable
  close-icon="close"
  position="bottom"
  :style="{ height: '30%' }"
/>
<!-- 圖標(biāo)位置 -->
<van-popup
  v-model:show="show"
  closeable
  close-icon-position="top-left"
  position="bottom"
  :style="{ height: '30%' }"
/>

圓角彈窗

設(shè)置 ?round? 屬性后，彈窗會(huì)根據(jù)彈出位置添加不同的圓角樣式。

<van-popup
  v-model:show="show"
  round
  position="bottom"
  :style="{ height: '30%' }"
/>

指定掛載位置

彈出層默認(rèn)掛載到組件標(biāo)簽所在位置，可以通過(guò) ?teleport? 屬性指定掛載位置。

<!-- 掛載到 body 節(jié)點(diǎn)下 -->
<van-popup v-model:show="show" teleport="body" />

<!-- 掛載到 #app 節(jié)點(diǎn)下 -->
<van-popup v-model:show="show" teleport="#app" />

API

Props

Events

Slots

類型定義

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

import type {
  PopupProps,
  PopupPosition,
  PopupInstance,
  PopupCloseIconPosition,
} from 'vant';

主題定制

樣式變量

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