vant 时分秒选择组件封装

<template>

  <div class="edit-time-picker">

    <van-popup v-model="showPicker" round position="bottom">

      <van-picker

        ref="picker"

        show-toolbar

        :columns="columns"

        @cancel="showPicker = false"

        @confirm="onConfirm"

      />

    </van-popup>

  </div>

</template>

<script>

import { Picker, Popup } from 'vant';

Vue.use(Picker).use(Popup);

export default {

  data() {

    return {

      showPicker: false,

      columns: []

    }

  },

  created() {

    this.initColumns()

  },

  methods: {

    initColumns() {

      const list = []

      const Hours = []

      const Minutes = []

      const Seconds = []

      for (let i = 0; i<=23; i++) {

        Hours.push(String(i).padStart(2, '0'))

      }

      for (let i = 0; i<=59; i++) {

        Minutes.push(String(i).padStart(2, '0'))

        Seconds.push(String(i).padStart(2, '0'))

      }

      list.push({

        values: Hours,

        defaultIndex: 0

      })

      list.push({

        values: Minutes,

        defaultIndex: 0

      })

      list.push({

        values: Seconds,

        defaultIndex: 0

      })

      this.columns = list

    },

    open(times) {

      this.showPicker = true

      console.log('times', times)

      // 设置当前选中时间 19:23:33 格式

      if(times) {

        const initialTime = times.split(':')

        if(initialTime.length === 3) {

          this.$nextTick(() => {

            this.$refs.picker && this.$refs.picker.setIndexes([Number(initialTime[0]), Number(initialTime[1]), Number(initialTime[2])])

          })

        }

      } else {

        // 当前时间

        const date = new Date();

        let hours = String(date.getHours()).padStart(2, '0') // 时

        let minutes = String(date.getMinutes()).padStart(2, '0') // 分

        let seconds = String(date.getSeconds()).padStart(2, '0') //秒

        this.$nextTick(() => {

            this.$refs.picker && this.$refs.picker.setIndexes([Number(hours), Number(minutes), Number(seconds)])

          })

      }

    },

    onConfirm(val) {

      this.$emit('edit', val.join(':'))

    }

  },

}

</script>

// 使用方式

<time-picker ref="timePicker" />

this.$refs.timePicker.open('19:23:22')