Vant Popup 弹出层浅析

发布时间：2023-04-19 14:10:26 所属栏目：教程来源：

导读：弹出层容器，用于展示弹窗、信息提示等内容，支持多个弹出层叠加展示

引入
import Vue from 'vue';
import { Popup } from 'vant';

Vue.use(Popup);
基础用法
通过v-model控制弹出层是否

弹出层容器，用于展示弹窗、信息提示等内容，支持多个弹出层叠加展示

引入
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属性指定挂载位置


<van-popup v-model="show" get-container="body" />


<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');
}
}
}
注意：使用 get-container 属性的组件不能为根节点

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!