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 ref="picker" :show="showTime" @comfirn="getTimeVal" @cancel="close" :picIndex="picIndex"/>
  </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,
        picIndex:this.item.pickIndex||[]
      }
    },
    props:['item'],
    methods: {
      showPicker(){
        this.showTime = true;
        $(".btscroll").css({'position':'fixed'})
        $(".foot").css({'position':'fixed'})
      },
      getTimeVal(value,index){//确定
        // 首位为0则去掉
        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,pickIndex:index});
        this.$emit("updata",newData);
        $(".btscroll").css({'position':'absolute'})
      },
      close(){//点击蒙层关闭
        this.showTime = false;
        $(".btscroll").css({'position':'absolute'})
      }
    },
    components:{
      Picker
    },
    watch:{
      item:{
        handler(newVal,oldVal){
          this.val = newVal.value|| '请选择';
          //有初始值或者未选择时，重置index
          const hasOrg =newVal.value==='1分钟'; //newVal.value.indexOf("分钟")>-1||newVal.value.indexOf("1")>-1||newVal.value.indexOf("0")>-1;
          if(!newVal.value||hasOrg){//没有值时复原时间组件中的index
            this.$refs.picker.resetIndex();
          }
        },
        deep:true
      }
    }
  };
</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;
      font-size: .24rem;
    }
  }
</style>