# UmsPopup

<template>
  <div>
    <ums-header
            @onLeftPartClick="leftClick"
            title="UmsPopup"
    ></ums-header>
    <ums-popup position="top" v-model="popupVisible1">
      <div class="popup">
        <text style="color:#fff">顶部弹出</text>
      </div>
    </ums-popup>
    <ums-popup position="right" v-model="popupVisible2">
      <div class="popupPage">
        <ums-button @click.native="popupVisible2 = false">关闭</ums-button>
      </div>
    </ums-popup>
    <ums-popup position="left" v-model="popupVisible3">
      <div class="popupPage">
        <ums-button @click.native="popupVisible3 = false">关闭</ums-button>
      </div>
    </ums-popup>
    <ums-popup position="bottom" v-model="popupVisible4">
      <div class="popup">
        <ums-picker style="border-radius: 5px; margin: 20px" :slots="yearSlot" :visibleItemCount="5"></ums-picker>
      </div>
    </ums-popup>
    <div style="margin-top: 200px;width: 750px;justify-content: center;align-items: center">
      <div class="btn">
        <ums-button size="small" @click.native="popupVisible1 = true">顶部</ums-button>
      </div>
      <div class="btn">
        <ums-button size="small" @click.native="popupVisible2 = true">右部</ums-button>
      </div>
      <div class="btn">
        <ums-button size="small" @click.native="popupVisible3 = true">左部</ums-button>
      </div>
      <div class="btn">
        <ums-button size="small" @click.native="popupVisible4 = true">底部</ums-button>
      </div>
    </div>
  </div>
</template>

<style lang="stylus" scoped>
  .popupPage
    width: 750px
    height: 1334px
    background-color #CCC
    justify-content center
    align-items center
  .popup
    justify-content center;
    align-items center;
    background-color rgba(0,0,0,.7)
    width: 750px;
    padding: 30px;
  .text
    color: #FFF
  .btn
    margin 30px
</style>

<script>
  import {UmsPopup, UmsPicker, UmsButton, UmsHeader} from "../index.js"
  export default {
    data () {
      return {
        yearSlot: [{
          value: ['1984', '1985', '1986', '1987', '1988', '1989', '1990', '1991', '1992', '1993', '1994', '1995'],
          default: "1989"
        }],
        popupVisible1: false,
        popupVisible2: false,
        popupVisible3: false,
        popupVisible4: false
      }
    },
    components:{
      UmsPopup,
      UmsPicker,
      UmsButton,
      UmsHeader
    },
    watch:{
      popupVisible1(newVal){
        if (newVal) {
          setTimeout(()=> {
            this.popupVisible1 = false
          }, 2000)
        }
      },
      popupVisible4(newVal){
        if (newVal) {
          setTimeout(()=> {
            this.popupVisible4 = false
          }, 2000)
        }
      }
    },
    methods: {
      leftClick() {
        const navigator = weex.requireModule("navigator")
        navigator.pop()
      }
    }
  }
</script>