Popup

弹出层。

引入

  1. import { Popup } from 'we-vue'
  3. Vue.use(Popup)

例子

指定高度

  1. <wv-popup :visible.sync="popupVisible2" :height="300">
  2.   <wv-group>
  3.     <wv-switch title="关闭" v-model="popupVisible2"/>
  4.     <wv-cell title="title" value="value" is-link/>
  5.     <wv-cell title="title" value="value" is-link/>
  6.   </wv-group>
  7. </wv-popup>
  9. <wv-popup :visible.sync="popupVisible3" height="100%">
  10.   <wv-group>
  11.     <wv-switch title="关闭" v-model="popupVisible3"/>
  12.     <wv-cell title="title" value="value" is-link/>
  13.     <wv-cell title="title" value="value" is-link/>
  14.   </wv-group>
  15. </wv-popup>

模态弹出层

<wv-popup
  :visible.sync="popupVisible4"
  :close-on-click-mask="false"
  @open="onShow"
  @close="onHide"
>
  <wv-group>
    <wv-switch title="关闭" v-model="popupVisible4"/>
    <wv-cell title="title" value="value" is-link/>
    <wv-cell title="title" value="value" is-link/>
  </wv-group>
</wv-popup>

自定义遮罩背景色

<wv-popup :visible.sync="popupVisible5" :mask-style="{ backgroundColor: 'rgba(0, 255, 255, 0.5)' }">
  <wv-group>
    <wv-switch title="关闭" v-model="popupVisible5"/>
    <wv-cell title="title" value="value" is-link/>
    <wv-cell title="title" value="value" is-link/>
  </wv-group>
</wv-popup>

API

参数类型说明可选值默认值
heightNumber/String高度,可设置 %、px、vh 单位的高度'auto'
maskBoolean是否显示遮罩true
lock-on-scrollBoolean锁定滚动true
close-on-click-maskBoolean点击遮罩层关闭弹出层true
mask-classString遮罩层附加 css 类
mask-styleString遮罩层样式'rgba(0, 0, 0, 0.6)'

Slots

name描述
-弹出层内容区