Как в v-time-picker отключить, чтобы выбрать минуты?

Question

В моем приложении Vue. js я использую v-time-picker виджет Vuetify framework. Есть ли способ отключить выбор минут? Если пользователь выбирает час, виджет v-time-picker автоматически переключается на блок минут. Я хочу сохранить фокус в часовом блоке. Как вы можете видеть в моем случае, когда пользователь выбирает час, я устанавливаю значение минут программно. Вот почему мне не нужно показывать блок минут пользователю.

<template>
<v-time-picker
    ref="timePicker"
    full-width
    format="24hr"
    no-title
    @click:hour="changeTimePickerValue"
    v-model="selectedTimePickerValue">
</v-time-picker>
<template>

<script>
export default {
    data () {
        return {
            selectedTimePickerValue: null
        }
    },
    mounted () {
        this.$refs.timePicker.onChange = function () {
            // this.$emit(`click:${selectingNames[this.selecting]}`, value)
            if (this.inputHour === this.lazyInputHour &&
                this.inputMinute === this.lazyInputMinute &&
                (!this.useSeconds || this.inputSecond === this.lazyInputSecond)
            ) return
            const time = this.genValue()
            if (time === null) return
            this.lazyInputHour = this.inputHour
            this.lazyInputMinute = this.inputMinute
            this.useSeconds && (this.lazyInputSecond = this.inputSecond)
            this.$emit('change', time)
        }.bind(this.$refs.timePicker)
    },
    methods: {
        changeTimePickerValue: function (v) {
            v = v < 10 ? '0' + v : v
            this.selectedTimePickerValue = v + ':00'
        }
    }
}
</script>

Answer 1

Хорошо, давайте сделаем это.

Как мы видим в VTimePicker, есть свойство selecting, которое является перечислением [1,2,3] для hour, minutes, seconds.

У нас нет прямого доступа к этим данным, и для них нет API в интерфейсе компонента. Но могут ли такие вещи остановить таких славных исследователей, как мы? Конечно, нет.

Мы можем видеть обработчик onChange, который делает все, после того, как timePicker был изменен.

onChange (value: number) {
      this.$emit(`click:${selectingNames[this.selecting]}`, value)

      const emitChange = this.selecting === (this.useSeconds ? SelectingTimes.Second : SelectingTimes.Minute)

      if (this.selecting === SelectingTimes.Hour) {
        this.selecting = SelectingTimes.Minute
      } else if (this.useSeconds && this.selecting === SelectingTimes.Minute) {
        this.selecting = SelectingTimes.Second
      }

      if (this.inputHour === this.lazyInputHour &&
        this.inputMinute === this.lazyInputMinute &&
        (!this.useSeconds || this.inputSecond === this.lazyInputSecond)
      ) return

      const time = this.genValue()
      if (time === null) return

      this.lazyInputHour = this.inputHour
      this.lazyInputMinute = this.inputMinute
      this.useSeconds && (this.lazyInputSecond = this.inputSecond)

      emitChange && this.$emit('change', time)
    },

Очевидно, что в нашем сценарии использования нам нужно, чтобы что-то, что нужно просто запустить this.$emit('change', time) в конце, так что мы можем, как настоящие старожилы, сделать следующее:

    <v-time-picker
          ref="timePicker"
          full-width
          format="24hr"
          v-model="picked"
        >
        </v-time-picker>

       mounted() {

        this.$refs.timePicker.onChange = function () {

          this.$emit(`click:${selectingNames[this.selecting]}`, value)

if (this.inputHour === this.lazyInputHour &&
        this.inputMinute === this.lazyInputMinute &&
        (!this.useSeconds || this.inputSecond === this.lazyInputSecond)
      ) return

          const time = this.genValue();
          if (time === null) return;

          this.lazyInputHour = this.inputHour;
          this.lazyInputMinute = this.inputMinute;
          this.useSeconds && (this.lazyInputSecond = this.inputSecond);

          this.$emit('change', time);
        }.bind(this.$refs.timePicker);

Мы должны сделать все, что странно bind coz Vue proxy this, чтобы экземпляр компонента, но эта штука сделает всю работу.

Кстати, вам даже не нужно обрабатывать allowedMinutes, потому что пользователь никогда туда не доберется.