如何实现v-date-picker仅选择年月后自动关闭菜单？

核心问题分析 #

你之前的代码存在两个关键问题：

• 未开启v-date-picker的仅年月选择模式，默认需要选择具体日期，不符合需求
• 用原生DOM绑定事件的方式冗余且错误，回调里的this并非Vue实例，无法修改monthMenu状态

修改后的完整代码 #

HTML部分

<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
                 type="month"> <!-- 新增：开启年月选择模式 -->
  </v-date-picker>
</v-menu>

TypeScript部分

export default Vue.extend({
  data() {
    return {
      monthMenu: false,
      // 调整初始值格式：type="month"对应YYYY-MM格式，无需日期部分
      month: new Date().toISOString().substr(0, 7)
    };
  },
  computed: {
    txtMonth(): string {
      // 适配YYYY-MM格式，分割为年和月
      const [year, month] = this.month.split('-');
      return `${year}/${month}`;
    },
  },
  methods: {
    datePicked() {
      // 直接关闭菜单，无需DOM操作
      this.monthMenu = false;
    },
  },
});

关键改动说明 #

1. 开启年月选择模式：给v-date-picker添加type="month"属性，组件会自动切换为仅显示年、月选择界面，无需用户选择具体日期
2. 调整数据格式：type="month"对应的v-model值是YYYY-MM格式，所以初始值和计算属性都要适配这个格式
3. 简化关闭逻辑：@change事件在用户选择年月后会直接触发，此时只需将monthMenu设为false即可关闭菜单，完全不需要原生DOM操作，避免了this指向错误的问题

内容的提问来源于stack exchange，提问作者Deuel Ellan