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'
          />
          <div class="confBtn">
            <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,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
          },
        ],
      }
    },
    props:['show'],
    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;
        const value = val1 + val2 + val3;
        this.$emit("comfirn",value)
      },
      onCancel() {
        this.$emit("cancel")
      }
    }
  };
</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;
        div{
          color: #colors[theme];
        }
      }
    }
    .mask{
      .mask;
      z-index: 999;
    }
  }
</style>