ElementUI 源码解读之仿写 el-switch 切换按钮组件

2023-12-08 12:15:13

大家好，欢迎来到 ElementUI 源码解读系列文章的第二篇，今天我们将深入剖析 el-switch 组件的内部实现，了解它的功能和实现原理。

el-switch 组件简介

el-switch 组件是一个 Vue.js 组件，用于在界面上表示开关状态或在两种状态之间进行切换。它通常用于控制某些功能的启用或禁用，或在选项之间进行选择。el-switch 组件提供了一个直观的 UI，使用户可以轻松地切换状态。

源码解读

组件结构

el-switch 组件的 HTML 结构非常简单：

<div class="el-switch">
  <div class="el-switch__input">
    <input type="checkbox" class="el-switch__inner" />
  </div>
  <div class="el-switch__label"></div>
</div>

.el-switch：组件根元素，包含整个开关按钮。
.el-switch__input：输入元素容器，包含隐藏的复选框输入。
.el-switch__inner：隐藏的复选框输入，用于控制开关状态。
.el-switch__label：标签元素，用于显示开关状态的文本或图标。

组件状态

el-switch 组件有两个主要状态：

true：开关打开，文本或图标显示在组件的右侧。
false：开关关闭，文本或图标显示在组件的左侧。

事件处理

el-switch 组件通过 v-model 指令与 Vue.js 数据模型绑定。当开关状态改变时，它会触发 input 事件，并向父组件传递新的状态值。

自定义样式

el-switch 组件支持通过 CSS 类名进行样式自定义。你可以使用 .el-switch--<status> 类名来修改开关在不同状态下的样式。例如：

.el-switch--true {
  background-color: #409EFF;
}

.el-switch--false {
  background-color: #C0C4CC;
}

仿写 el-switch 组件

现在我们了解了 el-switch 组件的工作原理，我们就可以着手仿写一个自己的开关按钮组件了。

HTML 结构

<div class="my-switch">
  <input type="checkbox" class="my-switch__input" />
  <div class="my-switch__label"></div>
</div>

JavaScript 实现

// my-switch.js
import Vue from 'vue';

export default {
  name: 'MySwitch',
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    label: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      isActive: this.value,
    };
  },
  methods: {
    toggle() {
      this.isActive = !this.isActive;
      this.$emit('input', this.isActive);
    },
  },
  template: `
    <div class="my-switch" :class="{ 'my-switch--active': isActive }">
      <input type="checkbox" class="my-switch__input" @click="toggle" />
      <div class="my-switch__label">{{ label }}</div>
    </div>
  `,
};

使用自定义开关按钮组件

<template>
  <my-switch v-model="isActive" label="启用" />
</template>

<script>
import MySwitch from './my-switch.js';

export default {
  data() {
    return {
      isActive: false,
    };
  },
  components: {
    MySwitch,
  },
};
</script>