Vue.js 3中v-calendar默认颜色修改及按钮单独点击事件实现

用户原代码：

<template>
  <v-row>
    <v-col>
      <v-sheet>
        <v-calendar class="custom"></v-calendar>
      </v-sheet>
    </v-col>
  </v-row>
</template>
<style>
  .custom {
    background-color: antiquewhite;
    color: brown;
  }
  .custom button {
    color: crimson;
    background-color: aquamarine;
    box-shadow: none;
  }
</style>

问题1：无法覆盖“Today”按钮样式 #

用户尝试通过.custom button选择器修改按钮样式，但“Today”按钮未生效。

解决方案 #

Vuetify组件内部有样式隔离机制，且“Today”按钮可能带有更高优先级的内置类，需要用深度选择器穿透隔离：

/* Vue3 写法 */
.custom :deep(.v-btn) {
  color: crimson;
  background-color: aquamarine;
  box-shadow: none;
}

/* Vue2 写法 */
.custom /deep/ .v-btn {
  color: crimson;
  background-color: aquamarine;
  box-shadow: none;
}

如果仍未生效，可以通过浏览器开发者工具查看“Today”按钮的具体类名，使用更精准的选择器：

.custom :deep(.v-calendar-header .v-btn--text) {
  color: crimson;
  background-color: aquamarine;
}

尽量避免使用!important，优先通过精准选择器提升权重。

问题2：点击日期等元素也触发v-calendar的@click事件 #

直接绑定@click到v-calendar会触发事件冒泡，导致点击组件内任何元素都会执行回调。

解决方案 #

方案1：事件委托+目标判断

在回调函数中检查点击目标是否为按钮（或按钮的子元素），仅满足条件时执行逻辑：

<template>
  <v-calendar class="custom" @click="handleCalendarClick"></v-calendar>
</template>
<script>
export default {
  methods: {
    handleCalendarClick(event) {
      // 查找点击元素是否属于按钮
      const targetBtn = event.target.closest('button');
      if (targetBtn) {
        this.doSomething();
      }
    },
    doSomething() {
      // 这里写你的按钮点击逻辑
      console.log('仅按钮点击触发');
    }
  }
}
</script>

方案2：自定义按钮模板（更精准）

利用v-calendar的header插槽自定义头部按钮，直接在按钮上绑定事件，彻底避免冒泡问题：

<template>
  <v-calendar class="custom">
    <template #header="{ prev, next, today, month, year }">
      <v-btn @click="prev">上月</v-btn>
      <span class="mx-4">{{ month }} {{ year }}</span>
      <v-btn @click="next">下月</v-btn>
      <v-btn @click="doSomething" class="ml-2">Today</v-btn>
    </template>
  </v-calendar>
</template>
<script>
export default {
  methods: {
    doSomething() {
      console.log('Today按钮点击触发');
    }
  }
}
</script>

内容的提问来源于stack exchange，提问作者Pongsatorn Tassaro