如何禁用在 v-time-picker 小部件中选择分钟？答案

【问题标题】：How disable to select minutes in v-time-picker widget?如何禁用在 v-time-picker 小部件中选择分钟？
【发布时间】：2020-01-06 05:26:42
【问题描述】：

在我的 Vue.js 应用程序中，我使用 Vuetify 框架的 v-time-picker 小部件。我想禁用选择分钟。如果用户选择小时，在分钟内自动插入 00。如何正确制作？现在我设置了allowed-minutes 道具，但在这种情况下，用户无论如何都需要选择分钟。

<template>
  <v-time-picker
    full-width
    scrollable
    format="24hr"
    :disabled="timePickerDisabled"
    :allowed-minutes="allowedMinutes"
    v-model="selectedTimePickerItems">
  </v-time-picker>
</template>

<script>
export default {
  data () {
    return {
      selectedTimePickerItems: null,
      timePickerDisabled: true
    }
  },
  methods: {
    allowedMinutes: m => m % 60 === 0
  }
}
</script>

【问题讨论】：

标签： javascript vue.js time vuetify.js

【解决方案1】：

@click:hour 有一个点击事件。该事件发出 timepicker 的当前值。您可以利用它来设置数据。

Codepen：https://codepen.io/aaha/pen/abzEWPE

 <div id="app">
  <v-app>
       <v-menu
        v-model="menu"
        max-width="290px"
        min-width="290px"
      >
        <template v-slot:activator="{ on }">
          <v-text-field
            :value="time"
            label="Picker in menu"
            readonly
            v-on="on"
          ></v-text-field>
        </template>
        <v-time-picker
          v-if="menu"
          :value="time"
          @click:hour="closePicker"
        ></v-time-picker>
      </v-menu>
  </v-app>
</div>

var vApp = new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: {
    time: null,
    menu: false
  },
  methods: {
    closePicker: function(v){
      v = v < 10 ? '0'+v : v;
      this.time = v+":00";
      this.menu = false
    }
  }
})

【讨论】：

感谢您的回答！ closePicker 方法设置00 分钟，但就我而言，我只有v-time-picker。我没有你的例子中的v-text-field。小时后选择小部件使动画到分钟块。我想禁用该动画并且不显示分钟块。你的意见可以吗？

【解决方案2】：

我找到了一种方法来禁用除小时之外的所有时间。这种方法也适用于始终可见的 VTimePickers。

您需要在一个小时后立即返回小时选择已被选中。为此使用ref、@click:hour、$nextTick 和内部属性selectingHour。
防止用户使用pointer-events: none; 手动切换到分钟（或秒）选择。

<v-time-picker ref="picker"
               @click:hour="selectingHourIfUseHoursOnly"
               class="custom-time-picker">
  You can select only full hour time points for this field.
</v-time-picker>

methods: {
  selectingHourIfUseHoursOnly() {
    this.$nextTick(() => {
      this.$refs.picker.selectingHour = true;
    });
  },
},

.custom-time-picker .v-time-picker-title {
  pointer-events: none;
}

看看我的代码笔：https://codepen.io/sebu10n/pen/yLoVZyV

【讨论】：

【解决方案3】：

结合<v-text-field>元素使用的解决方案：

<v-col>
  <v-menu
    ref="menu"
    v-model="timeMenu"
    :close-on-content-click="false"
    :nudge-right="50"
    :return-value.sync="time"
    transition="scale-transition"
    offset-y
    max-width="290px"
    min-width="290px"
  >
    <template v-slot:activator="{ on, attrs }">
      <v-text-field
        v-model="time"
        label="Time in hours"
        prepend-icon="mdi-clock-time-four-outline"
        readonly
        v-bind="attrs"
        v-on="on"
      />
    </template>
    <v-time-picker
      v-if="timeMenu"
      v-model="time"
      format="24hr"
      light
      no-title
      full-width
      @click:hour="closePicker"
    />
  </v-menu>
</v-col>

data() {
  return {
    time: null,
    timeMenu: false,
  };
},
created() {
  const now = new Date(Date.now() - (new Date()).getTimezoneOffset() * 60 * 1000);
  this.time = this.getTimeStr(now);
},
methods: {
  getFormattedTime: (h) => `${`00${h}`.slice(-2)}:00`,
  getTimeStr(dt) {
    return this.getFormattedTime(dt.getUTCHours());
  },
  closePicker(t) {
    this.time = this.getFormattedTime(t);
    this.$refs.menu.save(this.time);
    this.timeMenu = false;
  },
}

【讨论】：