如何禁用在v-Time-Picker小工具中选择分钟?

2022-03-01 00:00:00 time javascript vue.js vuetify.js

在我的Vue.js应用程序中,我使用Vutify框架的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>

解决方案

小时@单击:小时有单击事件。该事件发出timePicker的当前值。您可以利用它来设置数据。

代码: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
    }
  }
})

相关文章