修改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; /* 使轨道在父元素内垂直居中 */
  }
}
相关推荐
雪落满地香36 分钟前
css:圆角边框渐变色
前端·css
风无雨3 小时前
react antd 项目报错Warning: Each child in a list should have a unique “key“prop
前端·react.js·前端框架
人无远虑必有近忧!3 小时前
video标签播放mp4格式视频只有声音没有图像的问题
前端·video
安分小尧7 小时前
React 文件上传新玩法:Aliyun OSS 加持的智能上传组件
前端·react.js·前端框架
编程社区管理员7 小时前
React安装使用教程
前端·react.js·前端框架
拉不动的猪8 小时前
vue自定义指令的几个注意点
前端·javascript·vue.js
yanyu-yaya8 小时前
react redux的学习,单个reducer
前端·javascript·react.js
skywalk81638 小时前
OpenRouter开源的AI大模型路由工具,统一API调用
服务器·前端·人工智能·openrouter
Liudef068 小时前
deepseek v3-0324 Markdown 编辑器 HTML
前端·编辑器·html·deepseek
拉不动的猪8 小时前
uniapp与React Native/vue 的简单对比
前端·vue.js·面试