如何在vuetify中扩大v-switch的可点击区域

Question

默认v-switch只能在开关表面和标签上点击。我想在 v-switch 中附加填充区域。我的开关位于 v-app-bar.

内

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

但是，没有多余的区域。我可以扩展 v-switch 的填充吗？

Answer 1

您可以利用 label 插槽并添加您想要的任何元素，如本例所示：

 <v-switch v-model="switchMe">
        <template v-slot:label>
          <span class="pr-2">     
            Click the button:
          </span>
          <v-btn color="primary" >switch</v-btn>
        </template>
 </v-switch>

DEMO

如何在vuetify中扩大v-switch的可点击区域

How to expand the clickable area of v-switch in vuetify

vue.js

vuetify.js