如何禁用在v-Time-Picker小工具中选择分钟？-前端问题

How disable to select minutes in v-time-picker widget?(如何禁用在v-Time-Picker小工具中选择分钟？)

本文介绍了如何禁用在v-Time-Picker小工具中选择分钟？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

在我的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
    }
  }
})

这篇关于如何禁用在v-Time-Picker小工具中选择分钟？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！