Vant Popup 弹出层
弹出层容器,用于、信息等,多个弹出层叠加展示
import Vue from 'vue'; import { Popup } from 'vant'; Vue.use(Popup);
通过v-model控制弹出层是否展示
<van-cell is-link @click="showPopup">展示弹出层</van-cell> <van-popup v-model="show"></van-popup>
export default { data() { return { show: false } }, methods: { showPopup() { this.show = true; } } };
通过position设置弹出位置,认居中弹出,可以设置为top、bottom、left、right
<van-popup v-model="show" position="top" :style="{ height: '20%' }" />
设置closeable后,会在弹出层的右上角图标,并且可以通过close-icon图标,使用close-icon-position可以图标位置
<van-popup v-model="show" closeable position="bottom" :style="{ height: '20%' }" /> <!-- 图标 --> <van-popup v-model="show" closeable close-icon="close" position="bottom" :style="{ height: '20%' }" /> <!-- 图标位置 --> <van-popup v-model="show" closeable close-icon-position="top-left" position="bottom" :style="{ height: '20%' }" />
设置round后,弹窗会根据弹出位置不同的圆角样式
<van-popup v-model="show" round position="bottom" :style="{ height: '20%' }" />
弹出层认挂载到组件所在位置,可以通过get-container指定挂载位置
<!-- 挂载到 body 节点下 --> <van-popup v-model="show" get-container="body" /> <!-- 挂载到 #app 节点下 --> <van-popup v-model="show" get-container="#app" /> <!-- 通过指定挂载位置 --> <van-popup v-model="show" :get-container="getContainer" />
export default { methods: { // 返回特定的 DOM 节点,作为挂载的父节点 getContainer() { return document.querySelector('.my-container'); } } }