preliminary/src/common/PickTime.vue

<!-- 时间类型控件 -->
<template>
  <!-- <transition name="fade"> -->
    <div :style="getStyle(detail,slide)" 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"/>
      <!-- <carrousel ref="picker"  v-if="showTime" :show="showTime" @comfirn="getTimeVal" @cancel="close" :picIndex="picIndex"></carrousel> -->
    </div> 
  <!-- </transition> -->
</template>
<script type="text/javascript">
  import $ from 'jquery';
  import Picker from './Picker.vue';
  // import carrousel from './PickSlide.vue';
  export default {
    name:'PickTime',
    props:{
      item:{
        default:''
      },
      slide:{
        default:false,
        type:Boolean
      },
      detail:{
        default:2,
        type:Number||String
      }
    },
    data() {
      return {
        val:this.item.value || '请选择',
        showTime:false,
        picIndex:this.item.pickIndex||[]
      }
    },
    methods: {
      getStyle(detail,slide){
        if(detail == 1){
          if(slide){
            return {'display':'block','background-color': '#F9F9F9'}
          }else{
            return {'display':'none'}
          }
        }else{
          return {'display':'block'}
        }
      },
      showPicker(){
        this.showTime = true;
        $(".btscroll").css({'position':'fixed','top':'1rem'})
        $(".foot").css({'position':'fixed','bottom':'0'})
      },
      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','top':'0'})
        $(".foot").css({'position':'absolute','bottom':'0'})
      },
      close(){//点击蒙层关闭
        this.showTime = false;
        $(".btscroll").css({'position':'absolute','top':'0'})
        $(".foot").css({'position':'absolute','bottom':'0'})
      }
    },
    components:{
      Picker,
      // carrousel
    },
    watch:{
      item:{
        handler(newVal,oldVal){
          this.val = newVal.value|| '请选择';
          if(!newVal.value){//没有值时复原时间组件中的index
            this.$refs.picker.resetIndex();
          }
        },
        deep:true
      }
    }
  };
</script>
<style lang="less" scoped>
  @import '../less/base.less';
  .toast-wrap{
    position: relative;
    z-index: 116;
    .bgques;
    .ptab{
      width:100%;
      height: .8rem;
      line-height: .8rem;
      text-align: center;
      border:1px solid #E6E6E6;
      border-radius: .4rem;
      color:#7C828E;
    }
    .check{
      color: #colors[theme] !important;
    }
    .tip{
      color: #7C828E;
      font-size: .24rem;
    }
  }
</style>