preliminary/src/common/PickTime.vue

<template>
  <div class="toast-wrap">
    <p v-show="val" :class="['tab',{'check':val != '请选择'}]" @click="showPicker">{{val}}</p>
    <p v-show="val != '请选择'" class="tip">点击可修改</p>
    <div class="content" v-show="show">
      <van-picker
        :columns="columns"
        :visible-item-count='3'
      />
      <div class="confBtn">
        <div @click="getVal">确认</div>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
  import $ from 'jquery';
  // import {getNum} from '@utils/tools.js';
  // const num = getNum();
  const num = [0,1,2,3,4,5,6,7,8,9];
  const unit = ['分钟', '小时', '天', '周', '月','年'];
  export default {
    name:'PickTime',
    data() {
      return {
        columns: [
          {
            values:num,
            className:'column1'
          },
          {
            values:num,
            className:'column2',
            defaultIndex: 2
          },
          {
            values:unit,
            className:'column3'
          },
        ],
        val:this.item.value || '请选择',
        show:false
      }
    },
    props:['item'],
    methods: {
      showPicker(){
        this.show = true;
      },
      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;
        this.val = val1 + val2 + val3;
        this.show = false;
        const newData = Object.assign({},this.item,{value:this.val,valueP:this.val});
        this.$emit("updata",newData);
      }
    }
  };
</script>
<style lang="less" scoped>
  @import '../less/base.less';
  .toast-wrap{
    margin-bottom: .2rem;
    position: relative;
    .tab{
      width:100%;
      height: .8rem;
      line-height: .8rem;
      text-align: center;
      border:1px solid #E6E6E6;
      border-radius: .1rem;
      color:#7C828E;
    }
    .content{
      padding-top: 25px;
      width: 100%;
      height: 227px;
      background: #fff;
      z-index: 999;
      position: absolute;
      top:.88rem;
      left: 50%;
      transform: translateX(-50%);
      box-sizing: border-box;
      border-radius: .2rem;
      z-index: 1000;
      font-size: .3rem;
      overflow-y: hidden;
      box-shadow: 0 .12rem .24rem 0 rgba(79,129,255,0.40);
      .confBtn{
        height: 44px;
        line-height: 44px;
        text-align: center;
        border-top: 1px solid #ebedf0;
        margin-top: 25px;
        div{
          color: #colors[theme];
        }
      }
    }
    .check{
      color: #colors[theme] !important;
    }
    .tip{
      color: #7C828E;
    }
  }
</style>