实现一个Switch开关组件只需要一个div?详细记录Switch组件开发过程

乐闻x

已于 2023-12-11 16:20:46 修改

阅读量903

点赞数 1

分类专栏： CSS 学习手册 # React 手写组件库文章标签： react.js css css3 switch

于 2021-12-13 23:42:34 首次发布

本文链接：https://blog.youkuaiyun.com/m0_37890289/article/details/121917032

版权

React 手写组件库同时被 2 个专栏收录

8 篇文章

订阅专栏

CSS 学习手册

7 篇文章

订阅专栏

最终效果图

switch

实现逻辑

一、switch容器

// html

	<div className="dumbo-switch"></div>
  
// css

	.dumbo-switch {
  	height: 22px;
  	width: 44px;
  	border: 1px solid;
  	border-radius: 100px;
  	border: 1px solid #cccccc;
  	cursor: pointer;
	}

二、switch inner

// html
	
// css
.dumbo-switch {
  height: 22px;
  width: 44px;
  border-radius: 100px;
  background: #1890ff;
  position: relative;

  &::after {
    position: absolute;
    background: #ffffff;
    content: '';
    box-sizing: border-box;
    border-radius: 100%;
    width: 18px;
    height: 18px;
    top: 2px;
    box-shadow: 0 2px 4px #00230b33;
  }
}

.dumbo-switch--default {
  opacity: 0.4;
  cursor: not-allowed;
  &::after {
    left: 2px;
  }
}

三、switch 选中状态

// html

  <div className="dumbo-switch dumbo-switch--checked"></div>
  
// css
.dumbo-switch {
  height: 22px;
  width: 44px;
  border-radius: 100px;
  background: #1890ff;
  position: relative;

  &::after {
    position: absolute;
    background: #ffffff;
    content: '';
    box-sizing: border-box;
    border-radius: 100%;
    width: 18px;
    height: 18px;
    top: 2px;
    box-shadow: 0 2px 4px #00230b33;
    transition: all 0.3s ease-in-out;
  }
}

.dumbo-switch--checked {
  opacity: 1;
  cursor: pointer;
  &::after {
    left: calc(100% - 20px);
  }
}

四、抽取 props 参数

checked
onChange
disabled

import React from 'react';
import classnames from 'classnames';
import './index.less';

export interface IButton {
    checked: boolean;
    onChange: (checked: boolean) => void;
    disabled: boolean;
}

export default function Switch(props: IButton) {
    const { checked, onChange, disabled } = props;
    return (
        <div
            onClick={() => {
               if (!disabled) {
                    onChange(!checked)
                }
            }}
            className={classnames("dumbo-switch", {
                'dumbo-switch--default': !checked,
                'dumbo-switch--checked': checked,
                'dumbo-switch--disabled': disabled
            })}>

        </div>
    )
}

React 代码

import React from 'react';
import classnames from 'classnames';
import './index.less';

export interface IButton {
    checked: boolean;
    onChange: (checked: boolean) => void;
    disabled?: boolean;
}

export default function Switch(props: IButton) {
    const { checked, onChange, disabled = false } = props;
    return (
        <div
            onClick={() => {
                if (!disabled) {
                    onChange(!checked)
                }
            }}
            className={classnames("dumbo-switch", {
                'dumbo-switch--default': !checked,
                'dumbo-switch--checked': checked,
                'dumbo-switch--disabled': disabled
            })}>

        </div>
    )
}

.dumbo-switch {
  height: 22px;
  width: 44px;
  border-radius: 100px;
  background: #1890ff;
  position: relative;

  &::after {
    position: absolute;
    background: #ffffff;
    content: '';
    box-sizing: border-box;
    border-radius: 100%;
    width: 18px;
    height: 18px;
    top: 2px;
    box-shadow: 0 2px 4px #00230b33;
    transition: all 0.3s ease-in-out;
  }
}

.dumbo-switch--default {
  opacity: 0.4;
  &::after {
    left: 2px;
  }
}

.dumbo-switch--checked {
  opacity: 1;
  cursor: pointer;
  &::after {
    left: calc(100% - 20px);
  }
}

.dumbo-switch--disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

调用方式

export const Default = ({ ...props }) => {
    const [visible, setVisible] = useState(false);
    return <div>
        <Switch checked={visible} onChange={setVisible} />
    </div>
}