preliminary/src/common/PickTime.vue

<!-- 时间类型控件 -->
<template>
  <div class="toast-wrap">
    <p v-show="val" :class="['ptab',{'check':val != '请选择'}]" @click="showPicker">{{val}}</p>
    <p v-show="val != '请选择'" class="tip">点击可修改</p>
    <Picker :show="showTime" @comfirn="getTimeVal" @cancel="close"/>
  </div> 
</template>
<script type="text/javascript">
  import $ from 'jquery';
  import Picker from './Picker.vue';
  export default {
    name:'PickTime',
    data() {
      return {
        val:this.item.value || '请选择',
        showTime:false
      }
    },
    props:['item'],
    methods: {
      showPicker(){
        this.showTime = true;
        $(".btscroll").css({'position':'fixed'})
        $(".foot").css({'position':'fixed'})
      },
      getTimeVal(value){//确定
        if(value.charAt(0) == 0){
          this.val = value.substr(1);
        }else{
          this.val = value;
        }
        
        this.showTime = false;
        const newData = Object.assign({},this.item,{value:this.val,valueP:this.val});
        this.$emit("updata",newData);
        $(".btscroll").css({'position':'absolute'})
      },
      close(){//点击蒙层关闭
        this.showTime = false;
        $(".btscroll").css({'position':'absolute'})
      }
    },
    components:{
      Picker
    }
  };
</script>
<style lang="less" scoped>
  @import '../less/base.less';
  .toast-wrap{
    margin-bottom: .2rem;
    position: relative;
    z-index: 116;
    .ptab{
      width:100%;
      height: .8rem;
      line-height: .8rem;
      text-align: center;
      border:1px solid #E6E6E6;
      border-radius: .1rem;
      color:#7C828E;
    }
    .check{
      color: #colors[theme] !important;
    }
    .tip{
      color: #7C828E;
    }
  }
</style>