如何禁用在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
}
}
})
相关文章