elementui switch

ElementUI Switch 组件使用指南

ElementUI 的 Switch 组件是一个开关选择器，常用于状态切换场景（如启用/禁用）。以下是详细使用方法及常见配置：

基本用法

通过 v-model 绑定布尔值控制开关状态：

<el-switch v-model="value"></el-switch>

export default {
  data() {
    return {
      value: true
    }
  }
}

自定义样式

设置 active-color 和 inactive-color 修改颜色：

<el-switch
  v-model="value"
  active-color="#13ce66"
  inactive-color="#ff4949">
</el-switch>

文字描述

使用 active-text 和 inactive-text 添加文字：

<el-switch
  v-model="value"
  active-text="启用"
  inactive-text="禁用">
</el-switch>

禁用状态

添加 disabled 属性禁用开关：

<el-switch v-model="value" disabled></el-switch>

事件处理

监听 change 事件处理状态变化：

<el-switch v-model="value" @change="handleChange"></el-switch>

methods: {
  handleChange(val) {
    console.log('开关状态变为:', val);
  }
}

扩展配置

设置 width 调整宽度（单位 px）：

<el-switch v-model="value" width="60"></el-switch>

表单验证

结合 el-form 进行验证：

<el-form :model="form" :rules="rules">
  <el-form-item label="状态" prop="status">
    <el-switch v-model="form.status"></el-switch>
  </el-form-item>
</el-form>

注意事项

1. 当与 el-form 联用时，需确保 v-model 绑定的值类型为布尔值
2. 文字描述的宽度会自动适应，但过长文本可能导致布局问题
3. 在移动端使用时建议增加点击区域

ElementUI Switch 组件支持所有原生 DOM 事件，可通过 .native 修饰符监听。