Vant4 Popup 彈出層

2023-02-16 17:54 更新

介紹

彈出層容器,用于展示彈窗、信息提示等內(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

參數(shù) 說(shuō)明 類型 默認(rèn)值
v-model:show 是否顯示彈出層 boolean false
overlay 是否顯示遮罩層 boolean true
position 彈出位置,可選值為 top bottom right left string center
overlay-class 自定義遮罩層類名 string | Array | object -
overlay-style 自定義遮罩層樣式 object -
duration 動(dòng)畫時(shí)長(zhǎng),單位秒,設(shè)置為 0 可以禁用動(dòng)畫 number | string 0.3
z-index 將彈窗的 z-index 層級(jí)設(shè)置為一個(gè)固定值 number | string 2000+
round 是否顯示圓角 boolean false
lock-scroll 是否鎖定背景滾動(dòng) boolean true
lazy-render 是否在顯示彈層時(shí)才渲染節(jié)點(diǎn) boolean true
close-on-popstate 是否在頁(yè)面回退時(shí)自動(dòng)關(guān)閉 boolean false
close-on-click-overlay 是否在點(diǎn)擊遮罩層后關(guān)閉 boolean true
closeable 是否顯示關(guān)閉圖標(biāo) boolean false
close-icon 關(guān)閉圖標(biāo)名稱或圖片鏈接,等同于 Icon 組件的 name 屬性 string cross
close-icon-position 關(guān)閉圖標(biāo)位置,可選值為 top-left
bottom-left bottom-right
string top-right
before-close v3.1.4 關(guān)閉前的回調(diào)函數(shù),返回 false 可阻止關(guān)閉,支持返回 Promise (action: string) => boolean | Promise<boolean> -
icon-prefix v3.0.18 圖標(biāo)類名前綴,等同于 Icon 組件的 class-prefix 屬性 string van-icon
transition 動(dòng)畫類名,等價(jià)于 transition 的 name 屬性 string -
transition-appear 是否在初始渲染時(shí)啟用過(guò)渡動(dòng)畫 boolean false
teleport 指定掛載的節(jié)點(diǎn),等同于 Teleport 組件的 to 屬性 string | Element -
safe-area-inset-top 是否開啟頂部安全區(qū)適配 boolean false
safe-area-inset-bottom 是否開啟底部安全區(qū)適配 boolean false

Events

事件名 說(shuō)明 回調(diào)參數(shù)
click 點(diǎn)擊彈出層時(shí)觸發(fā) event: MouseEvent
click-overlay 點(diǎn)擊遮罩層時(shí)觸發(fā) event: MouseEvent
click-close-icon 點(diǎn)擊關(guān)閉圖標(biāo)時(shí)觸發(fā) event: MouseEvent
open 打開彈出層時(shí)觸發(fā) -
close 關(guān)閉彈出層時(shí)觸發(fā) -
opened 打開彈出層且動(dòng)畫結(jié)束后觸發(fā) -
closed 關(guān)閉彈出層且動(dòng)畫結(jié)束后觸發(fā) -

Slots

名稱 說(shuō)明
default 彈窗內(nèi)容
overlay-content v3.0.18 遮罩層的內(nèi)容

類型定義

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

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

主題定制

樣式變量

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

名稱 默認(rèn)值 描述
--van-popup-background var(--van-background-2) -
--van-popup-transition transform var(--van-duration-base) -
--van-popup-round-radius 16px -
--van-popup-close-icon-size 22px -
--van-popup-close-icon-color var(--van-gray-5) -
--van-popup-close-icon-margin 16px -
--van-popup-close-icon-z-index 1 -


以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)