vue使用vant-ui 使用Picker添加多级选择

vue使用vant-ui 使用Picker添加多级选择

<template>
  <div class="timer">
    <van-popup v-model="timeshow" position="top" :overlay="false">
            <van-picker :columns="columns" :show-toolbar='true' title='什么时候吃面包' @change="onChange" :visible-item-count='5'/>

    </van-popup>
  </div>
</template>

<script>
let h = [];
let m=[];
// 添加小时
for (var i = 0; i < 24; i++) {
  if (i < 10) {
    h.push("0" + i + "时");
  } else {
    h.push(i + "时");
  }
}
//添加分钟
for (var i = 0; i < 60; i++) {
  if (i < 10) {
    m.push("0" + i + "分");
  } else {
    m.push(i + "分");
  }
}




const citys = {
  今天: h,
  明天: h,
  
};
const min={
      分钟:m
}

import { Popup } from "vant";

export default {
  data() {
    return {
      timeshow: false,
      columns: [
        {
          values: Object.keys(citys),
          className: "column1"
        },
        {
          values: citys["今天"],
          className: "column2",
          defaultIndex: 1
        },
       
        {
          values: min['分钟'],
        //   className: "column1",
        //   defaultIndex: 1,
        }
      ]
    };
  },
  created(){
  },
  mounted() {
     
  },
  methods: {
    onChange(picker, values) {
        console.log(this.columns)
        console.log(values)
      picker.setColumnValues(1, citys[values[0]]);
    }
  }
};
</script>

<style lang='less' scoped>
.timer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}
.van-picker__toolbar {
  .van-picker__cancel,
  .van-picker__confirm {
    font-size: 16px;
  }
}
</style>