preliminary/src/common/Picker.vue

<!-- 时间选择弹窗 -->
<template>
  <portal to="notification-outlet">
      <div class="toast-wrap" v-if="show">
        <div class="content">
          <van-picker
            :columns="columns"
            :visible-item-count='3'
            :swipe-duration="100"
            @change="handlechange"
          />
          <div class="confBtn">
            <p class="tip" v-show="showTip">请选择正确的时间</p>
            <div @click="getVal">确认</div>
          </div>
        </div>
      <div class="mask" @click="onCancel"></div>
      </div>
  </portal>
</template>
<script type="text/javascript">
  import $ from 'jquery';
  const num = [0,1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,8,9];
  const unit = ['分钟', '小时', '天', '周', '月','年','分钟', '小时', '天', '周', '月','年'];
  export default {
    name:'Picker',
    data() {
      return {
        columns: [
          {
            values:num,
            className:'column1',
            defaultIndex: 10
          },
          {
            values:num,
            className:'column2',
            defaultIndex: 11
          },
          {
            values:unit,
            className:'column3',
            defaultIndex: 6
          },
        ],
        showTip:false,
        columIndx:[]
      }
    },
    props:['show','picIndex'],
    created(){//记录位置
      this.columns[0].defaultIndex = this.columIndx[0] = this.picIndex[0] || 10;
      this.columns[1].defaultIndex = this.columIndx[1] = this.picIndex[1] || 11;
      this.columns[2].defaultIndex = this.columIndx[2] = this.picIndex[2] || 6;
    },
    methods: {
      getVal() {
        const val1 = $(".column1 ul .van-picker-column__item--selected")[0].innerText;
        const val2 = $(".column2 ul .van-picker-column__item--selected")[0].innerText;
        const val3 = $(".column3 ul .van-picker-column__item--selected")[0].innerText;
        // 如果选两个0,则提示
        if(val1 == 0 && val2 == 0){
          this.showTip = true;
          return
        }
        const value = val1 + val2 + val3;
        this.$emit("comfirn",value,this.columIndx)
        this.columns[0].defaultIndex = this.columIndx[0] || 10;
        this.columns[1].defaultIndex = this.columIndx[1] || 11;
        this.columns[2].defaultIndex = this.columIndx[2] || 6;
      },
      onCancel() {
        this.$emit("cancel")
        this.showTip = false;
      },
      handlechange(picker, value, colum){//关掉提示
        this.showTip = false;
        for(let i=0;i<3;i++){
          if(i == 2){
            this.columIndx[i] = unit.lastIndexOf(value[i]);
          }else{
            this.columIndx[i] = num.lastIndexOf(value[i]);
          }
        }
      },
      resetIndex(){//清除时复原默认index
        this.columns[0].defaultIndex = 10;
        this.columns[1].defaultIndex = 11;
        this.columns[2].defaultIndex = 6;
      }
    }
  };
</script>
<style lang="less" scoped>
  @import '../less/base.less';
  .toast-wrap{
    .content{
      padding-top: 25px;
      width: 6.3rem;
      // height: 4.8rem;
      height: 227px;
      background: #fff;
      z-index: 999;
      position: fixed;
      top:50%;
      left: 50%;
      transform: translate(-50%,-50%);
      box-sizing: border-box;
      border-radius: .2rem;
      z-index: 1000;
      font-size: .3rem;
      overflow-y: hidden;
      .confBtn{
        height: 44px;
        line-height: 44px;
        text-align: center;
        border-top: 1px solid #ebedf0;
        margin-top: 25px;
        position: relative;
        .tip{
          position: absolute;
          top:-22px;
          font-size: .24rem;
          color: red;
          line-height: 20px;
          width:100%;
          text-align: center;
        }
        div{
          color: #colors[theme];
        }
      }
    }
    .mask{
      .mask;
      z-index: 999;
    }
  }
</style>