请告诉我是否有其他方法可以使用 v-date-picker 来执行此操作。我只希望用户能够选择年份和月份，然后日期选择器菜单应该关闭。
这是我的 html 作为示例，但我不介意使用不同的代码，只要它仍然使用 v-date-picker。
<v-menu v-model='monthMenu'
:close-on-content-click='false'
:nudge-right='40'
transition='scale-transition'
offset-y
min-width='290px'>
<template v-slot:activator='{ on, attrs }'>
<v-text-field v-model='txtMonth'
label='Month'
prepend-icon='mdi-calendar'
readonly
v-bind='attrs'
v-on='on'
></v-text-field>
</template>
<v-date-picker v-model='month'
@change='datePicked'
color='primary'
scrollable
></v-date-picker>
</v-menu>
ts，datePicked 方法有我尝试过但不起作用的方法
export default Vue.extend({
data() {
return {
monthMenu: false,
month: new Date(new Date().getFullYear(), new Date().getMonth()).toISOString()
.substr(0, 10),
};
},
computed: {
txtMonth(): string {
const [year, month, day] = this.month.split('-');
return `${year}/${month}/${day}`;
},
},
methods: {
datePicked(log: any) {
/* eslint-disable */
console.log('here2');
// const el = document.getElementsByClassName('v-date-picker-table--month') as unknown as HTMLElement;
const acc = document.getElementsByClassName('v-date-picker-table--month');
let i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventLis tener("click",function() {
console.log('here');
// this.monthMenu = false
});
}
},
},
});
在花了几个小时完成这个要求后，我能够实现它。您可以通过观察月份模型值来关闭打开的日期选择器模式。此外，为
month的type属性。现场演示：
new Vue({ el: '#app', vuetify: new Vuetify(), data () { return { monthMenu: false, txtMonth: '', month: '' } }, watch: { monthMenu (val) { val && setTimeout(() => (this.$refs.picker.activePicker = 'YEAR')) }, month (val) { this.monthMenu = false; } }, methods: { onInput(dateStr) { const month = dateStr.split('-')[1]; const year = dateStr.split('-')[0]; this.txtMonth = `${month}, ${year}`; } } })