W3Cschool
恭喜您成為首批注冊用戶
獲得88經(jīng)驗值獎勵
彈出層容器,用于展示彈窗、信息提示等內(nèi)容,支持多個彈出層疊加展示。
通過以下方式來全局注冊組件,更多注冊方式請參考組件注冊。
import { createApp } from 'vue';
import { Popup } from 'vant';
const app = createApp();
app.use(Popup);
通過 ?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,
};
},
};
通過 ?position
? 屬性設置彈出位置,默認居中彈出,可以設置為 ?top
?、?bottom
?、?left
?、?right
?。
<van-popup v-model:show="show" position="top" :style="{ height: '30%' }" />
設置 ?closeable
? 屬性后,會在彈出層的右上角顯示關閉圖標,并且可以通過 ?close-icon
? 屬性自定義圖標,使用 ?close-icon-position
? 屬性可以自定義圖標位置。
<van-popup
v-model:show="show"
closeable
position="bottom"
:style="{ height: '30%' }"
/>
<!-- 自定義圖標 -->
<van-popup
v-model:show="show"
closeable
close-icon="close"
position="bottom"
:style="{ height: '30%' }"
/>
<!-- 圖標位置 -->
<van-popup
v-model:show="show"
closeable
close-icon-position="top-left"
position="bottom"
:style="{ height: '30%' }"
/>
設置 ?round
? 屬性后,彈窗會根據(jù)彈出位置添加不同的圓角樣式。
<van-popup
v-model:show="show"
round
position="bottom"
:style="{ height: '30%' }"
/>
彈出層默認掛載到組件標簽所在位置,可以通過 ?teleport
? 屬性指定掛載位置。
<!-- 掛載到 body 節(jié)點下 -->
<van-popup v-model:show="show" teleport="body" />
<!-- 掛載到 #app 節(jié)點下 -->
<van-popup v-model:show="show" teleport="#app" />
參數(shù) | 說明 | 類型 | 默認值 |
---|---|---|---|
v-model:show | 是否顯示彈出層 | boolean | false
|
overlay | 是否顯示遮罩層 | boolean | true
|
position | 彈出位置,可選值為 top bottom right left
|
string | center
|
overlay-class | 自定義遮罩層類名 | string | Array | object | - |
overlay-style | 自定義遮罩層樣式 | object | - |
duration | 動畫時長,單位秒,設置為 0 可以禁用動畫 | number | string | 0.3
|
z-index | 將彈窗的 z-index 層級設置為一個固定值 | number | string | 2000+
|
round | 是否顯示圓角 | boolean | false
|
lock-scroll | 是否鎖定背景滾動 | boolean | true
|
lazy-render | 是否在顯示彈層時才渲染節(jié)點 | boolean | true
|
close-on-popstate | 是否在頁面回退時自動關閉 | boolean | false
|
close-on-click-overlay | 是否在點擊遮罩層后關閉 | boolean | true
|
closeable | 是否顯示關閉圖標 | boolean | false
|
close-icon | 關閉圖標名稱或圖片鏈接,等同于 Icon 組件的 name 屬性 | string | cross
|
close-icon-position | 關閉圖標位置,可選值為 top-left
bottom-left bottom-right
|
string | top-right
|
before-close v3.1.4
|
關閉前的回調(diào)函數(shù),返回 false 可阻止關閉,支持返回 Promise |
(action: string) => boolean | Promise<boolean> | - |
icon-prefix v3.0.18
|
圖標類名前綴,等同于 Icon 組件的 class-prefix 屬性 | string | van-icon
|
transition | 動畫類名,等價于 transition 的 name 屬性 |
string | - |
transition-appear | 是否在初始渲染時啟用過渡動畫 | boolean | false
|
teleport | 指定掛載的節(jié)點,等同于 Teleport 組件的 to 屬性 | string | Element | - |
safe-area-inset-top | 是否開啟頂部安全區(qū)適配 | boolean | false
|
safe-area-inset-bottom | 是否開啟底部安全區(qū)適配 | boolean | false
|
事件名 | 說明 | 回調(diào)參數(shù) |
---|---|---|
click | 點擊彈出層時觸發(fā) | event: MouseEvent |
click-overlay | 點擊遮罩層時觸發(fā) | event: MouseEvent |
click-close-icon | 點擊關閉圖標時觸發(fā) | event: MouseEvent |
open | 打開彈出層時觸發(fā) | - |
close | 關閉彈出層時觸發(fā) | - |
opened | 打開彈出層且動畫結束后觸發(fā) | - |
closed | 關閉彈出層且動畫結束后觸發(fā) | - |
名稱 | 說明 |
---|---|
default | 彈窗內(nèi)容 |
overlay-content v3.0.18
|
遮罩層的內(nèi)容 |
組件導出以下類型定義:
import type {
PopupProps,
PopupPosition,
PopupInstance,
PopupCloseIconPosition,
} from 'vant';
組件提供了下列 CSS 變量,可用于自定義樣式,使用方法請參考 ConfigProvider 組件。
名稱 | 默認值 | 描述 |
---|---|---|
--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 | - |
Copyright©2021 w3cschool編程獅|閩ICP備15016281號-3|閩公網(wǎng)安備35020302033924號
違法和不良信息舉報電話:173-0602-2364|舉報郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號
聯(lián)系方式:
更多建議: