Popup 弹出层

引入

基础用法

通过控制弹出层是否展示

<van-popup v-model="show">内容</van-popup>

<van-popup
  v-model="show"
  position="top"
/>

关闭图标

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

圆角弹窗

<van-popup
  v-model="show"
  round
  position="bottom"
  :style="{ height: '20%' }"
/>

弹出层默认挂载到组件所在位置，可以通过get-container属性指定挂载位置

export default {
  methods: {
    // 返回一个特定的 DOM 节点，作为挂载的父节点
    getContainer() {
      return document.querySelector('.my-container');
    }
  }
}

API

Props

Events