Javascript 如何在v时间选择器中禁用以选择分钟数？

在我的Vue.js应用程序中，我使用Vuetify框架的小部件。有没有办法禁用以选择分钟数？如果用户选择小时，

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>

导出默认值{
数据（）{
返回{
selectedTimePickerValue:空
}
},
挂载（）{
此.$refs.timePicker.onChange=函数（）{
//this.$emit（`click:${selectingNames[this.selecting]}`，value）
如果（this.inputHour===this.lazyInputHour&&
this.inputMinute===this.lazyInputMinute&&
（！this.useSeconds | | this.inputSecond===this.lazyInputSecond）
)返回
const time=this.genValue（）
if（time==null）返回
this.lazyInputHour=this.inputHour
this.lazyInputMinute=this.inputMinute
this.useSeconds&（this.lazyInputSecond=this.inputSecond）
此.$emit（'change'，time）
}.bind（此.$refs.timePicker）
},
方法：{
changeTimePickerValue:函数（v）{
v=v<10？'0'+v:v
this.selectedTimePickerValue=v+'：00'
}
}
}

好的，我们开始吧

正如我们在VTimePicker中所看到的，有一个属性

正在选择

，它是

小时

，

分钟

，

秒

的[1,2,3]枚举

我们无法直接访问此数据，并且在组件接口中也没有用于此数据的API。 但这样的东西能阻止像我们这样光荣的探险家吗？当然不是

我们可以看到

onChange

处理程序，它在时间选择器被更改后完成所有工作

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)
    },

很明显，在我们的用例中，我们需要这些东西来激发

这个。$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);

安装的（）{
此.$refs.timePicker.onChange=函数（）{
this.$emit（`click:${selectingNames[this.selecting]}`，value）
如果（this.inputHour===this.lazyInputHour&&
this.inputMinute===this.lazyInputMinute&&
（！this.useSeconds | | this.inputSecond===this.lazyInputSecond）
)返回
常量时间=this.genValue（）；
if（time==null）返回；
this.lazyInputHour=this.inputHour；
this.lazyInputMinute=this.inputMinute；
this.useSeconds&（this.lazyInputSecond=this.inputSecond）；
这是。$emit（'change'，time）；
}.bind（此.$refs.timePicker）；

我们必须做所有的wierd

bind

coz-Vue-proxy

this

到组件实例的工作，但是这些东西可以完成这项工作

顺便说一句，您甚至不需要处理

允许的分钟数

，因为用户将永远无法到达那里。

好的，让我们这样做吧

正如我们在VTimePicker中所看到的，有一个属性

正在选择

，它是

小时

，

分钟

，

秒

的[1,2,3]枚举

我们无法直接访问此数据，并且在组件接口中也没有用于此数据的API。 但是这样的东西能阻止像我们这样光荣的探险家吗？当然不能

我们可以看到

onChange

处理程序，它在时间选择器被更改后完成所有工作

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)
    },

很明显，在我们的用例中，我们需要这些东西来激发

这个。$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);

安装的（）{
此.$refs.timePicker.onChange=函数（）{
this.$emit（`click:${selectingNames[this.selecting]}`，value）
如果（this.inputHour===this.lazyInputHour&&
this.inputMinute===this.lazyInputMinute&&
（！this.useSeconds | | this.inputSecond===this.lazyInputSecond）
)返回
常量时间=this.genValue（）；
if（time==null）返回；
this.lazyInputHour=this.inputHour；
this.lazyInputMinute=this.inputMinute；
this.useSeconds&（this.lazyInputSecond=this.inputSecond）；
这是。$emit（'change'，time）；
}.bind（此.$refs.timePicker）；

我们必须做所有的wierd

bind

coz-Vue-proxy

this

到组件实例的工作，但是这些东西可以完成这项工作

---

顺便说一句，您甚至不需要处理

允许的分钟数

，因为用户永远不会到达那里。

您需要快速解决方案，还是更复杂的解决方案？您需要快速解决方案，还是更复杂的解决方案？谢谢您的回答！您测试了代码吗？My

ESLint

对代码的这部分引发错误：

this.$emit（'click:${selectingNames[this.selecting]}'，value）

。详细信息：

selectingNames和value未定义（无未定义）

。你对此有什么想法吗？你可以删除该部分，它只是发出

点击：小时

事件，因此如果你不使用它，你可以删除它。我已经按照你的建议删除了该部分。在这种情况下，它会在控制台中显示下一个错误，不幸的是：

挂载钩子中的错误：“TypeError:无法设置未定义”

的属性'onChange'。您是否在模板中对其进行了引用？是的，我进行了引用。您可以再次查看我的帖子。我使用您的代码对其进行了更新。谢谢您的回答！您测试了您的代码吗？my

ESLint

对代码的这部分引发错误：

this.$emit（$click:${selectingNames[this.selecting]}“，值）

。详细信息：

未定义选择名称和值（无未定义）

。你对此有什么想法吗？你可以删除该部分，它只是发出

点击：小时

事件，因此如果你不使用它，你可以删除它。我已经按照你的建议删除了该部分。在这种情况下，它会在控制台中显示下一个错误，不幸的是：

错误