Popup 弹出层

弹层组件，支持上下左右四个方向面板弹出

注意事项

• 常用于筛选面板组件的包裹组件
• 从顶部或底部浮出的模态，点击蒙层进行关闭
• 支持使用者主动关闭

效果

使用方法

<template>
  <div class="wxc-demo">
      <lc-title title="弹出层" class="title"></lc-title>
      <category title="使用案例"></category>
      <div class="button-list">
        <lc-button class="btn-margin" @click="isLeftShow=true">点击弹出左侧面板</lc-button>
        <lc-button class="btn-margin" @click="isRightShow=true">点击弹出右侧面板</lc-button>
        <lc-button class="btn-margin" @click="isBottomShow=true">点击弹出底部面板</lc-button>
        <lc-button class="btn-margin" @click="isTopShow=true">点击弹出顶部面板</lc-button>
      </div>
      
      <lc-popup width="200"
                 :show="isLeftShow"
                 @LcPopupOverlayClicked="hide"
                 pos="left">
      </lc-popup>

      <lc-popup width="300"
                 :show="isRightShow"
                 @LcPopupOverlayClicked="hide"
                 pos="right">
            <lc-button class="btn-margin" @click="isRightShow=false">点击隐藏</lc-button>
      </lc-popup>

      <lc-popup height="300"
                 :show="isBottomShow"
                 @LcPopupOverlayClicked="hide"
                 pos="bottom">
      </lc-popup>

      <lc-popup height="300"
                 :show="isTopShow"
                 @LcPopupOverlayClicked="hide"
                 pos="top">
      </lc-popup>
  </div>
</template>

<style scoped>
 .button-list {
    padding-left: 12px;
  }
  .btn-margin {
    margin-top: 20px;
  }
  .btn {
    width: 300px;
    height: 40px;
    margin-top: 150px;
    flex-direction: row;
    align-items: center;
    align-self: center;
    justify-content: center;
    border-radius: 3px;
    background-color: rgb(92, 184, 92);
    border-color: rgb(76, 174, 76);
  }

  .yellow {
    background-color: #FDC22D;
    border-color: #FDC22D;
  }

  .btn-txt {
    font-size: 16px;
    color: #ffffff;
  }

  .btn-margin {
    margin-top: 20px;
  }

  .content {
    padding: 15px;
  }

  .demo-title {
    align-items: center;
    margin-bottom: 10px;
    margin-top: 20px;
  }

  .title {
    color: #333333;
    font-size: 18px;
  }

  .wxc-title {
    align-self: flex-start;
  }

  .content-text {
    color: #333333;
    font-size: 15px;
    margin-top: 10px;
  }


</style>

<script>
  import LcTitle from '_mods/title.vue';
  import Category from '_mods/category.vue';
  export default {
    components: { LcTitle, Category },
    data: () => ({
      isLeftShow: false,
      isRightShow: false,
      isBottomShow: false,
      isTopShow: false,
    }),
    methods: {
      hide(){
        this.isLeftShow=false;
        this.isRightShow=false;
        this.isBottomShow=false;
        this.isTopShow=false;
      }
    }
  };
</script>

可配置参数

Prop	Type	Required	Default	Description
show	Boolean	Y	false	开启打开popup
pos	String	N	bottom	出来位置top/bottom/left/right
height	String	N	840	弹出层的高度(向上向下时候设置)
width	String	N	750	弹出层的宽度(向左向右时候设置)
popup-color	String	N	#FFFFFF	弹出层的颜色
stand-out	Number	N	0	底部突出高度
animation	Object	N	{timingFunction: 'ease-in'}	自定义面板动画
overlay-cfg	Object	N	{}	配置参数

事件回调

// 需要在`@LcPopupOverlayClicked`中设置面板关闭。

调用关闭

在lc-popup上面绑定ref，然后调用this.$refs.LcPopup.hide();即可关闭，常用于侧滑筛选面板