介绍
弹出层容器,用于展示弹窗、信息提示等内容,支持多个弹出层叠加展示
引入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&