<template>
  <div id="app">
<upaas-popdatetimeview :trigger='trigger' @on-hide='handleHide'
   @on-confirm='handleConfirm' cancel-text='清空' yearRow='{value}年' :open.sync="showDateTime" date="2014-12-20">
      </upaas-popdatetimeview>
    <div style="position:relative;top:20px">
      <button @click="handleClick" class='btn'>测试
      <span class="trangle"><i></i></span></button>

        fdsafdsafdsafdafdsafdsafdsafdafdsafdsafdsafdafdsafdsafdsafdafdsafdsafdsafdafdsafdsafdsafdafdsafdsafdsafda
      </div>

    </div>

  </div>
</template>
<script>
  import PopDateTimeView from 'muse-ui/pop-datetime';
  export default {
    data(){
      return {
        showDateTime:false,
        trigger: null,
        selectDate:'',
      };
    },
    components:{
      'upaas-popdatetimeview':PopDateTimeView,
    },
    methods:{
      handleConfirm(value){
        alert(value);
        this.showDateTime  = false;

      },
      handleClick(i){
        this.showDateTime = !this.showDateTime;


      },
      handleHide(){
        alert("重置");
        this.showDateTime  = false;

      },
      handleChange(){},
    },
    mounted(){
      this.$nextTick(()=>{
        this.trigger = document.querySelector('.btn');
      });
    }

  }

</script>
<style lang="less">
  #app .vux-label{
    display:inline-block;
  }
  .mu-popover{
    width:100%;
    border-radius: 0;
  }
.trangle {
    width: 0;
    height: 0;
    border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #e6e7e8;
    border-style: dashed dashed solid;
    border-width: 5px;
    position: absolute;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    z-index: 1;
}
 .trangle i {
    border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #fafafa;
    border-style: dashed dashed solid;
    border-width: 4px;
    position: absolute;
    bottom: -5px;
    left: -4px;
}

</style>
