用途:Element Plus 的 Switch 开关组件,用于在两种对立状态之间切换,常见于启用/禁用功能、切换设置、开/关以及布尔状态切换。
主要能力:支持 v-model 绑定(boolean、string、number);sizes 提供 large、default、small 三种尺寸;可设置 active-text/inactive-text 文本描述,并用 inline-prompt 将文字显示在圆点内;可通过 active-icon/inactive-icon 自定义开启与关闭图标;支持 active-value/inactive-value 扩展取值类型;disabled 禁用、loading 加载态;before-change 可在切换前执行确认或异步校验。API 还包含 width、name、validate-event 等属性,change 事件在值变化时触发,并提供 active-action、inactive-action、active、inactive 插槽用于自定义内容。
使用方式:基本用法为 <el-switch v-model="value" />。尺寸示例:<el-switch v-model="value1" size="large" />、<el-switch v-model="value2" />、<el-switch v-model="value3" size="small" />。文本描述示例:<el-switch v-model="value" active-text="Open" inactive-text="Close" />;行内提示示例:<el-switch v-model="value" active-text="O" inactive-text="X" inline-prompt />。自定义图标示例:<el-switch v-model="value" :active-icon="Check" :inactive-icon="Close" />,并需 import { Check, Close } from '@element-plus/icons-vue'。扩展取值示例:<el-switch v-model="value" active-value="on" inactive-value="off" />。禁用与加载:<el-switch v-model="value" disabled />、<el-switch v-model="value" loading />。切换前拦截:<el-switch v-model="value" :before-change="beforeChange" />,beforeChange 可返回 Promise<boolean> 或 boolean,如 return confirm('Are you sure?')。
适用场景:表单设置项、功能开关、偏好配置等需要二元状态切换的界面。
最佳实践与限制:建议用 before-change 做确认对话框,用 loading 处理异步操作,用 active-value/inactive-value 处理非布尔值。资料未提供更多限制说明。