如何扩大Vuetify中v-switch组件的可点击区域

直接给v-switch添加py-5类不生效，是因为v-switch的点击事件默认仅绑定在内部开关本体和文本标签两个子元素上，外层根元素的内边距不属于这两个元素的响应范围，因此点击该区域不会触发开关切换。

方案1：修改内部可点击区域样式（无需额外绑定事件） #

通过深度选择器调整v-switch内部复选框的可响应范围，使其铺满整个外层组件的内边距区域：

<template>
  <v-app-bar app color="blue">
    <v-switch 
      id="switch-to-run" 
      class="expand-click-switch py-5"
      v-model="runSwitch"
      inset
      color="purple" 
      label="Execute Program" 
      hide-details="auto"
    />
  </v-app-bar>
</template>

<!-- 样式部分 -->
<style scoped>
/* Vue3 深度选择器写法，Vue2 替换为 ::v-deep */
:deep(.expand-click-switch) {
  position: relative;
}
:deep(.expand-click-switch input[type="checkbox"]) {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 1;
  cursor: pointer;
}
</style>

该方案保留了开关原生的无障碍访问特性，比如按空格键可以正常触发切换。

方案2：外层套容器绑定点击事件（兼容性更强） #

在外层添加一个带内边距的容器，直接在容器上绑定点击事件切换开关值，无需修改组件内部样式：

<template>
  <v-app-bar app color="blue">
    <div class="py-5" @click="runSwitch = !runSwitch">
      <v-switch 
        id="switch-to-run" 
        v-model="runSwitch"
        inset
        color="purple" 
        label="Execute Program" 
        hide-details="auto"
        style="pointer-events: none;"
      />
    </div>
  </v-app-bar>
</template>

<script setup>
import { ref } from 'vue'
// 开关绑定的响应式变量
const runSwitch = ref(false)
</script>

其中pointer-events: none用于禁止开关本身的点击事件，避免和外层容器的点击事件重复触发。该方案不受Vuetify版本迭代的样式类名变更影响，适配性更强。

内容的提问来源于stack exchange，提问作者Roki Turner