Vuetify中如何实现带不可点击关联文本的v-switch开关

Vuetify官方未提供单独控制label点击的原生属性，以下两种方案均可保留原生label排版效果，仅允许开关本体触发切换，适配敏感数据操作场景：

• 方案1：使用label插槽+阻止点击事件
  直接复用v-switch内置的label插槽，对自定义文本元素添加点击阻止逻辑，无需额外调整样式：

  <div id="app">
    <v-app>
      <v-container>
        <v-switch v-model="switchValue">
          <template #label>
            <span @click.prevent>不可点击的关联文本</span>
          </template>
        </v-switch>
      </v-container>
    </v-app>
  </div>
  

  new Vue({
    el: '#app',
    data() {
      return {
        switchValue: false
      }
    }
  })
  

• 方案2：CSS禁用label点击事件
  无需修改组件结构，仅通过CSS样式禁用label的指针事件即可：
  1. 给目标v-switch添加自定义类名

  <v-switch class="disable-label-click" label="不可点击的关联文本" v-model="switchValue"></v-switch>
  

  2. 添加对应样式

  .disable-label-click .v-label {
    pointer-events: none;
  }
  

两种方案均能达到和原生label完全一致的排版效果，且点击文本不会触发开关状态变更。

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