如何实现一个简单的Switch组件

背景

UI同学给了设计稿，设计稿中的 Switch 跟组件库(例如arco-design、antd-design) 的Switch样式有区别。

大多数的Switch组件是类似这样的：

image.png
小圆点完全位于Switch内部，而我们的设计稿小圆点是超出Switch的：
image.png
image.png

尝试

刚开始是想用switch-view包裹小圆点和黄色背景色：

const Switch = () => {
  const [checked, setChecked] = useState(false);
  const handleCheck = () => {
    setChecked(!checked);
  }
  return (
    <div className="bg">
      <label className="switch-container" onClick={handleCheck}>
        <div className={`switch-view ${checked ? 'switch-view-check' : ''}`}>
          <div className="switch-view-before"></div>
          <div className="switch-circle"></div>
          </div>
      </label>
    </div>
  )
}

image.png

实现之后的效果是这样的：

image.png
image.png

存在的问题就是小圆点的高度(34px) 大于父元素的高度(32px) ，但是超出父元素的区域又不得不隐藏(黄色区域)，导致小圆点被截断并且不是一个圆形。

优化

实际上，switch-view-before完全可以去掉，然后直接把黄色作为switch-circle父元素的背景色

 <div className="bg">
        <label className="switch-container" onClick={handleCheck}>
          <div className={`switch-view ${checked ? 'switch-view-check' : ''}`}>
            <div className="switch-circle"></div>
            </div>
        </label>
    </div>

image.png

效果如下：

image.png
image.png

但是，这还是不符合我们的小圆点必须大于外层的需求。

最终方案

最终方案更简单了，只有小圆点和父级元素。如下图，在没有选中的时候，父元素的背景色是灰色，选中后，让小圆点向X轴移动，然后父元素背景色改为黄色。

image.png

    <div className="bg">
        <label className={`switch-container ${checked ? 'switch-view-container-check' : ''}`} onClick={handleCheck}>
            <div className={`switch-circle ${checked ? 'switch-circle-check' : ''}`}></div>
        </label>
    </div>

.bg {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 400px;
  height: 400px;
  background-color: black;
}
.switch-container {
  display: inline-block;
  position: relative;
  height: 32px;
  width: 64px;
  cursor: pointer;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.2);;
}

.switch-view-container-check {
  background-color: #dfb745;
}

.switch-circle {
  position: absolute;
  left: -1px;
  top: -1px;
  z-index:100;
  width: 34px;
  height: 34px;
  border-radius: 100%;
  background-color: #fff;
  transition: all linear .2s;
}

.switch-circle-check {
  transform: translateX(100%)
}