Vant Popup 彈出層

介紹

彈出層容器，用于展示彈窗、信息提示等內(nèi)容，支持多個彈出層疊加展示

引入

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

Vue.use(Popup);

代碼演示

基礎(chǔ)用法

通過v-model控制彈出層是否展示

<van-cell is-link @click="showPopup">展示彈出層</van-cell>
<van-popup v-model="show">內(nèi)容</van-popup>

export default {
  data() {
    return {
      show: false
    }
  },

  methods: {
    showPopup() {
      this.show = true;
    }
  }
};

彈出位置

通過position屬性設(shè)置彈出位置，默認(rèn)居中彈出，可以設(shè)置為top、bottom、left、right

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

關(guān)閉圖標(biāo)

設(shè)置closeable屬性后，會在彈出層的右上角顯示關(guān)閉圖標(biāo)，并且可以通過close-icon屬性自定義圖標(biāo)，使用close-icon-position屬性可以自定義圖標(biāo)位置

<van-popup
  v-model="show"
  closeable
  position="bottom"
  :style="{ height: '20%' }"
/>
<!-- 自定義圖標(biāo) -->
<van-popup
  v-model="show"
  closeable
  close-icon="close"
  position="bottom"
  :style="{ height: '20%' }"
/>
<!-- 圖標(biāo)位置 -->
<van-popup
  v-model="show"
  closeable
  close-icon-position="top-left"
  position="bottom"
  :style="{ height: '20%' }"
/>

圓角彈窗

設(shè)置round屬性后，彈窗會根據(jù)彈出位置添加不同的圓角樣式

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

指定掛載位置

彈出層默認(rèn)掛載到組件所在位置，可以通過get-container屬性指定掛載位置

<!-- 掛載到 body 節(jié)點下 -->
<van-popup v-model="show" get-container="body" />

<!-- 掛載到 #app 節(jié)點下 -->
<van-popup v-model="show" get-container="#app" />

<!-- 通過函數(shù)指定掛載位置 -->
<van-popup v-model="show" :get-container="getContainer" />

export default {
  methods: {
    // 返回一個特定的 DOM 節(jié)點，作為掛載的父節(jié)點
    getContainer() {
      return document.querySelector('.my-container');
    }
  }
}

注意：使用 get-container 屬性的組件不能為根節(jié)點

API

Props

Events