Popup 弹出

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

Slots

Events