Popup

弹出层。

引入

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

例子

指定高度

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

模态弹出层

  1. <w-popup
  2.   :visible.sync="popupVisible4"
  3.   :close-on-click-mask="false"
  4.   @open="onShow"
  5.   @close="onHide"
  6. >
  7.   <w-group>
  8.     <w-switch title="关闭" v-model="popupVisible4"/>
  9.     <w-cell title="title" value="value" is-link/>
  10.     <w-cell title="title" value="value" is-link/>
  11.   </w-group>
  12. </w-popup>

自定义遮罩背景色

  1. <w-popup :visible.sync="popupVisible5" :mask-style="{ backgroundColor: 'rgba(0, 255, 255, 0.5)' }">
  2.   <w-group>
  3.     <w-switch title="关闭" v-model="popupVisible5"/>
  4.     <w-cell title="title" value="value" is-link/>
  5.     <w-cell title="title" value="value" is-link/>
  6.   </w-group>
  7. </w-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描述
-弹出层内容区