vue3----el-switch改变大小

在Vue 3中，如果你想改变el-switch组件的大小，可以通过CSS覆盖其默认样式来实现。你可以使用类选择器或者直接在元素上使用样式绑定来修改其尺寸。

以下是一个简单的例子，演示如何通过外部CSS类来改变el-switch的大小：

1. 定义CSS类：

.custom-switch .el-switch__core {
  width: 100px; /* 设置开关的宽度 */
  height: 50px; /* 设置开关的高度 */
}
 
.custom-switch .el-switch__core::after {
  width: 90px; /* 设置滑块的宽度 */
  height: 48px; /* 设置滑块的高度 */
}

2. 在Vue组件中应用这个CSS类：

<template>
  <el-switch class="custom-switch" v-model="switchValue"></el-switch>
</template>
 
<script setup>
import { ref } from 'vue';
import { ElSwitch } from 'element-plus';
 
const switchValue = ref(false);
</script>

在这个例子中，el-switch组件的宽度和高度通过.custom-switch .el-switch__core类被设置为100px和50px，滑块的宽度和高度通过.custom-switch .el-switch__core::after类被设置为90px和48px。

请确保Element Plus已正确安装并且你的Vue项目能够访问这个库。