修改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; /* 使轨道在父元素内垂直居中 */
  }
}
相关推荐
我要洋人死43 分钟前
导航栏及下拉菜单的实现
前端·css·css3
科技探秘人1 小时前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人1 小时前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR1 小时前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香1 小时前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q2498596931 小时前
前端预览word、excel、ppt
前端·word·excel
小华同学ai1 小时前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
Gavin_9151 小时前
【JavaScript】模块化开发
前端·javascript·vue.js
懒大王爱吃狼2 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
逐·風6 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#