vanpopup 高度_Vant Popup 弹出层

介绍

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

引入import Vue from 'vue';

import { Popup } from 'vant';

Vue.use(Popup);

代码演示

基础用法

通过v-model控制弹出层是否展示展示弹出层

内容export default {

data() {

return {

show: false

}

},

methods: {

showPopup() {

this.show = true;

}

}

};

弹出位置

通过position属性设置弹出位置，默认居中弹出，可以设置为top、bottom、left、right

v-model="show"

position="top"

:style="{ height: '20%' }"

/>

关闭图标

设置closeable属性后，会在弹出层的右上角显示关闭图标，并且可以通过close-icon属性自定义图标，使用close-icon-position属性可以自定义图标位置

v-model="show"

closeable

position="bottom"

:style&