Question

import { Popup } from 'feui';
components: {
  [Popup.name]: Popup,
},
data() {
  return {
  };
}
methods: {
}

代码演示

默认Popup

<fe-switch title="Default popup" v-model="show"></fe-switch>
<fe-popup v-model="show" @on-hide="log('hide')" @on-show="log('show')">
  <div class="popup0">
    <fe-group>
      <fe-switch title="另一个 switch" v-model="show"></fe-switch>
      <fe-switch title="显示 Toast" v-model="showToast"></fe-switch>
    </fe-group>
  </div>
</fe-popup>

全屏弹出

<fe-switch title="全屏弹出" v-model="show1"></fe-switch>
<fe-popup v-model="show1" height="100%">
  <div class="popup1">
    <fe-switch title="另一个 switch" v-model="show1"></fe-switch>
  </div>
</fe-popup>

内部滚动

<fe-switch title="with a Scroller" v-model="show2"></fe-switch>
<fe-popup v-model="show2" height="250px" style='overflow:hidden;'  
  @on-first-show="resetScroller">
  <fe-scroll class="page-content"
    :on-refresh="onRefresh"
    :on-infinite="onInfinite">
    <div v-for="(item, index) in items" :key="index" @click.native="onItemClick(index)" 
      class='item' :class="{'item-stable': index % 2 == 0}">
      {{ item }}
    </div>
    <div v-if="infiniteCount >= 2" slot="infinite" class="text-center">没有更多数据</div>
  </fe-scroll>
</fe-popup>

禁用点击mask关闭

<fe-switch title="禁用点击mask关闭" v-model="show5"></fe-switch>
<fe-popup v-model="show5" :hide-on-blur=false>
  <div class="popup2">
    <fe-group>
      <fe-switch title="禁用点击mask关闭" v-model="show5"></fe-switch>
    </fe-group>
    Mask不可点
  </div>
</fe-popup>

背景透明

<fe-group>
  <fe-switch title="背景透明" v-model="show7"></fe-switch>
</fe-group>
<fe-popup v-model="show7" height="270px" is-transparent>
  <div style="width: 95%;background-color:#fff;height:250px;
    margin:0 auto;border-radius:5px;padding-top:10px;">
    <fe-group>
    <fe-cell title="产品名称" value="比特币1个"></fe-cell>
    <fe-cell title="金额" value="￥10.24"></fe-cell>
    </fe-group>
    <div style="padding:20px 15px;">
    <fe-button type="primary">支付</fe-button>
    <fe-button @click.native="show7 = false"> 取消</fe-button>
    </div>
  </div>
</fe-popup>

背景透明

<fe-switch title="左边(100% width)" v-model="show8"></fe-switch>
<fe-popup v-model="show8" position="left" width="100%">
  <div class="position-horizontal-demo">
    <span class="nuim-close" @click="show8 = false"></span>
  </div>
</fe-popup>

API

参数	说明	类型	默认值	可选值
value	是否关闭，使用v-model绑定	Boolean	false	true,false
width	设置100%宽度必须使用该属性。在position为left或者right时有效。	String	auto	-
height	高度，设置100%为整屏高度。当position为top或者bottom时有效。	String	auto	-
show-mask	是否显示遮罩	Boolean	true	true,false
hide-on-blur	指定联动模式下的列数，当不指定时表示非联动	Boolean	true	true,false
is-transparent	是否为透明背景	Boolean	false	true,false
position	弹出的位置	String	bottom	left, right, top, bottom
popup-style	弹窗样式，可以用于强制指定 z-index	Object	-	-
hide-on-deactivated	是否在 deactived 事件触发时自动关闭，避免在路由切换时依然显示弹窗	Boolean	true	true,false
-	-	-	-	-

Slots

Slot名	说明	备注
default	弹窗主体内容	-
-	-	-

Events

事件名	参数	说明	备注
on-hide	-	关闭时触发	-
on-show	-	显示时触发	-
on-first-show	-	第一次显示时触发，可以在该事件回调里初始化数据或者界面	-
-	-	-	-