checkbox封装代码

手写checkbox

• 1、IconMys 是封装的字体组件(下面就是svg 的图片)

  'input-check': `<svg viewBox="0 0 29 21">
        <polygon points="12.41,20.74 0,10.82 4.37,5.35 11.96,11.42 23.75,0 28.62,5.03 "/>
        </svg>`,
  

• 2、Color, Font, 是公共变量 自己可以随意定义
• 3、styled 在js 中写样式工具

import React from 'react';
import styled from 'styled-components';
import {
    IconMys,
} from '../../core/index';
import {
    Color,
    Font,
} from '../../../../style/Const';

const Wrap = styled.div`
position: relative;
box-sizing: border-box;
padding-top: 10px;
padding-bottom: 10px;
min-height: 44px;
padding-left: 15px;
padding-right: 15px;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
.checkbox-item label{
    display: flex;
    justify-content: center;
    align-items: center;
}
.checkbox-content{
    flex: 1;
    font-size:${Font.Size.base}px;
    line-height: ${Font.LineHeight.md};
}
input:checked ~ .checkbox_icon{
    background-color: #2697ac;
    border: none;
    .checkbox_icon_mark{
        visibility: visible;
    }
}
`;
const CheckboxInput = styled.input`
position: absolute;
top: 0;
left: 0;
opacity: 0;
width: 100%;
height: 100%;
z-index: 2;
border: 0 none;
appearance: none;
box-sizing: border-box;
padding: 0;
`;
const CheckboxIcon = styled.span`
border-radius: 4px;
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-sizing: border-box;
width: 22px;
height: 22px;
background-color: #fff;
border: solid 1px ${Color.Border.base};
vertical-align: middle;
margin-right: 10px;
.checkbox_icon_mark{
    width: 15px;
    visibility: hidden;
    svg{
        color: #fff;
        width: 100%;
        height: auto;
        margin-top: 2px;
    }
}
`;

class Checkbox extends React.Component {
    render() {
        const { checked, value, name, onChange, width, ...rest } = this.props;
        return (
            <Wrap {...rest}>
                <div className="checkbox-item">
                    <label>
                        <CheckboxInput type="checkbox" name={name} className="checkbox-input" style={{width}} value={value} onChange={onChange} checked={checked} />
                        <CheckboxIcon className='checkbox_icon'>
                            <div className='checkbox_icon_mark'>
                                <IconMys type='#input-check' />
                            </div>
                        </CheckboxIcon>
                        <span className="checkbox-content">
                            {this.props.children}
                        </span>
                    </label>
                </div>
            </Wrap>
        );
    }
}
const noop = () => {};
Checkbox.defaultProps = {
    onChange: noop,
};
export default Checkbox;