React项目中手写圆形checkbox

一、开发样式介绍

最近开发中，需要用到勾选框，类似下面这种选中样式：

选中如下：

因为是移动端开发项目，所以需要根据屏幕大小进行缩放

使用antd的也可以，只需要覆盖原有样式即可，但是当屏幕变大的时候，勾选框的大小是固定的，同时，阿里的勾选框样式有用到js函数，还是比较麻烦的，所以思来想去还是决定自己手写

二、代码

react开发环境下，使用的是scss

            <input
              name="checkbox"
              value="Item 1"
              type="checkbox"
              className={styles['page-protocol__tui-checkbox']}
              onChange={handleCheckboxChange}
            />
            <span className={styles['page-protocol__agree']}>
              使用服务须同意
            </span>

这个html片段外面还有一个div我省略了，可以自己写一个div，再在下面的css外面套一个page-protocol的css就可以看见实际样式了

$vw_base: 375;

@function vw($px) {
  @return ($px / 375) * 100vw;
}
&__tui-checkbox:checked {
    background: #3cdcbe; //设置选中的背景颜色
  }

  &__tui-checkbox:focus {
    outline: none;  //设置点击时不出现白框
  }

  &__tui-checkbox {
    width: vw(15);  //设置勾选框的大小
    height: vw(15);
    background-color: #ffffff; //设置未选中的背景颜色
    border: solid vw(1) #afafaf;  //设置边框颜色
    border-radius: 50%;  //设置形状未圆形
    margin-right: vw(4);
    padding: 0;
    position: relative;
    display: inline-block;
    vertical-align: top;
    cursor: default;
    -webkit-appearance: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-transition: background-color ease 0.1s;
    transition: background-color ease 0.1s;
    top: vw(3);
  }

  &__tui-checkbox:checked::after {
    content: '';
    top: vw(2);//对勾显示的位置
    left: vw(2);
    position: absolute;
    background: transparent;
    border: #fff solid vw(2);//设置选中时显示的对勾
    border-top: none;
    border-right: none;
    height: vw(6); //对勾的两条边
    width: vw(9);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }

参考文章：https://blog.csdn.net/bzf0482/article/details/103011012#comments_13362646