如何在 v-time-picker 中禁用选择分钟？

Question

在我的 Vue.js 应用程序中，我使用 Vuetify 框架的 v-time-picker 小部件。有没有办法禁用选择分钟？如果用户选择小时，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 中看到的，hour、minutes、seconds 有一个属性 selecting，它是 [1,2,3] 的枚举。

我们无法直接访问这些数据，并且组件接口中也没有 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 因为 Vue 代理 this，但这些东西可以完成这项工作。

顺便说一句，你甚至不需要处理allowedMinutes，因为用户永远不会到达那里。