修改vuetify3的开关组件v-switch在inset模式下的大小

javascript 复制代码
<v-switch
    v-model="model"
    :label="`Switch: ${model.toString()}`"
    hide-details
    inset
  ></v-switch>

使用方式1:本页面使用

本页面中使用,必须要含有lang="scss" scoped,才会生效

javascript 复制代码
<style lang="scss" scoped>
.custom-switch {
  :deep(.v-switch__thumb) {
    height: 18px !important; /* 设置开关按钮的高度 */
    width: 18px !important; /* 设置开关按钮的宽度 */
  }

  :deep(.v-switch__track) {
    height: 20px !important; /* 设置开关轨道的高度 */
    min-width: 42px !important;
    align-self: center; /* 使轨道在父元素内垂直居中 */
  }
}
</style>

class引入这个样式

javascript 复制代码
<v-switch
    v-model="model"
    label="自动"
    hide-details
    inset
    class="custom-switch"
 ></v-switch>

使用方式2:放到公共scss中

如果需要放到公共的scss文件中引入的话,需要修改为下面这样才会生效,使用方式同样是引用custom-switch即可

javascript 复制代码
.custom-switch {
  .v-switch__thumb {
    height: 18px !important; /* 设置开关按钮的高度 */
    width: 18px !important; /* 设置开关按钮的宽度 */
  }

  .v-switch__track {
    height: 20px !important; /* 设置开关轨道的高度 */
    min-width: 42px !important;
    align-self: center; /* 使轨道在父元素内垂直居中 */
  }
}
相关推荐
五号厂房5 分钟前
React 中如何使用自定义Hook封装可复用逻辑
前端
icefiresong246 分钟前
使用 Node.js 和 Git 自动化部署项目
前端
码云之上7 分钟前
聊聊MCP Client及其实践
前端·架构·mcp
dasseinzumtode8 分钟前
ECharts 保留 tooltip.trigger: 'axis'的情况下 实现markPoint tooltip独立自定义悬浮框 功能
前端·echarts
小小小小宇9 分钟前
前端实现图片的上传、缩放、旋转、移动和裁剪
前端
Timo来了10 分钟前
上传图片后预览图片小试
前端
精通搬砖能手10 分钟前
简单实现MVVM框架,轻上手,简单易懂
前端
小桥风满袖10 分钟前
Three.js-硬要自学系列16 (贝塞尔曲线应用、组合曲线、路径管道、旋转成型、轮廓填充)
前端·css·three.js
凯哥197011 分钟前
Sciter.js 指南 - 自定义GUI程序头部-微信聊天窗
前端
用户79832667029419 分钟前
WebStorm插件 SmartInputPro 使用体验分享
前端