Popup 弹层

弹层组件，支持上下两个方向弹出

规则

• 内容部分可使用默认插槽进行自定义
• 点击蒙层或取消进行关闭

可选参数

Prop	type	Required	Default	Description
position	String	no	bottom	控制弹层弹出位置 bottom/top
overlay	Boolean	no	true	是否显示蒙层
showCancel	Boolean	no	false	是否显示取消项
title	String	no	-	弹层标题

使用方法

<template>
  <div class="page">
    <div class="button" @click="showPop('bottom')">弹出底部弹层</div>
    <div class="button" @click="showPop('top')">弹出顶部弹层</div>
    <vs-popup v-model="show" :position="position" :overlay="true" :showCancel="true" title="选择举报原因">
      <div class="content">
        <div class="pop-item">
          item1
        </div>
        <div class="pop-item last">
          item2
        </div>
      </div>
    </vs-popup>
  </div>
</template>

<script>
  import {Popup} from 'horizon-ui';

  export default {
    components: {
      'vs-popup': Popup,
    },
    data() {
      return {
        show: false,
        position:''
      }
    },
    methods: {
      showPop(position) {
        this.show = true;
        this.position = position;
      }
    }
  }
</script>