不使用插件和组件库，轻松构建 Switch 开关

2023-10-03 22:50:11

不使用插件与组件库，简易实现 Switch 开关组件

我们已经探索了如何在不借助插件和组件库的情况下，构建一个滑动单元格。而今天，我们将进一步深入研究如何实现一个更简单的组件：Switch 开关。

Switch 开关，也称为切换按钮，广泛应用于各种应用程序和网站中，用于在两种状态（通常为“开”和“关”）之间进行切换。与复选框不同，Switch 开关提供了一种更加直观且用户友好的方式来选择或切换设置。

HTML 结构

要构建一个 Switch 开关，我们需要使用以下 HTML 结构：

<label class="switch">
  <input type="checkbox" id="toggle">
  <span class="slider"></span>
</label>

<label> 元素用作开关组件的容器，并包含其子元素。
<input> 元素是实际的 Switch 开关，它是一个带有 type="checkbox" 的隐藏复选框。它负责切换开关的状态。
<span> 元素是一个滑块，它会在用户单击或切换开关时在视觉上移动。

CSS 样式

接下来，我们需要使用 CSS 来设置 Switch 开关的样式：

.switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 24px;
  border-radius: 12px;
  background-color: #ccc;
}

.switch input[type="checkbox"] {
  display: none;
}

.switch .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 12px;
  background-color: #fff;
  transition: .4s;
}

.switch input[type="checkbox"]:checked + .slider {
  background-color: #64dd17;
}

.switch input[type="checkbox"]:focus + .slider {
  box-shadow: 0 0 1px #64dd17;
}

.switch 类定义了 Switch 开关的基本样式，包括其尺寸、形状和背景颜色。
隐藏复选框 .switch input[type="checkbox"]。
.switch .slider 类设置滑块的样式，使其占据开关的整个区域并具有圆角。
当复选框被选中（.switch input[type="checkbox"]:checked + .slider）时，滑块的背景颜色会切换为绿色（#64dd17）。
当复选框获得焦点（.switch input[type="checkbox"]:focus + .slider）时，滑块周围会出现一个绿色的阴影。

JavaScript 功能

最后，我们需要使用 JavaScript 来处理开关的功能：

const switches = document.querySelectorAll('.switch');

switches.forEach((switchEl) => {
  const checkbox = switchEl.querySelector('input[type="checkbox"]');
  const slider = switchEl.querySelector('.slider');

  // 监听点击事件以切换开关状态
  slider.addEventListener('click', () => {
    checkbox.checked = !checkbox.checked;
  });

  // 监听键盘事件以切换开关状态
  checkbox.addEventListener('keypress', (e) => {
    if (e.keyCode === 13 || e.keyCode === 32) {
      e.preventDefault();
      checkbox.checked = !checkbox.checked;
    }
  });
});