如何减小v-switch的宽度并将其可点击区域缩至最小

解决方案 #

你可以通过以下两种方式缩小v-switch的宽度和可点击区域：

方法1：使用内置类快速收缩宽度

给v-switch添加Vuetify内置的d-inline工具类，即可让组件宽度自动收缩到内容最小尺寸，不再占满父容器100%宽度：

<template>
  <v-switch
    class="d-inline"
    v-model="switchVal"
    label="开关选项"
  />
</template>

如果不需要显示文本标签，直接移除label属性，组件会进一步收缩到仅开关本身的宽度。

方法2：自定义样式调整热区大小

如果要进一步缩小可点击热区，可以添加自定义样式修改组件的默认宽高和内部边距，Vue单文件组件中需要用:deep()穿透组件样式：

<template>
  <v-switch
    class="custom-switch"
    v-model="switchVal"
  />
</template>

<style scoped>
/* 收缩组件整体宽度 */
:deep(.custom-switch) {
  width: fit-content;
}
/* 缩小开关点击热区，默认热区会额外扩大方便点击，按需调整即可 */
:deep(.custom-switch .v-switch__input) {
  width: 36px;
  height: 24px;
  top: calc(50% - 12px);
  left: 0;
  padding: 0;
  margin: 0;
}
</style>

如果使用的是Vuetify2版本，类名略有差异，可打开浏览器开发者工具检查对应元素的类名后修改即可。

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