React專案中手寫圓形checkbox

2021-10-09 22:13:21 字數 716 閱讀 6549

最近開發中,需要用到勾選框,類似下面這種選中樣式:

選中如下:

因為是移動端開發專案,所以需要根據螢幕大小進行縮放

使用antd的也可以,只需要覆蓋原有樣式即可,但是當螢幕變大的時候,勾選框的大小是固定的,同時,阿里的勾選框樣式有用到js函式,還是比較麻煩的,所以思來想去還是決定自己手寫

react開發環境下,使用的是scss

name=

"checkbox"

value=

"item 1"

type=

"checkbox"

classname=

onchange=

/>

>

使用服務須同意

<

/span>

這個html片段外面還有乙個div我省略了,可以自己寫乙個div,再在下面的css外面套乙個page-protocol的css就可以看見實際樣式了

$vw_base

: 375;

@function

vw($px)

&__tui-checkbox:checked

&__tui-checkbox:focus

&__tui-checkbox

&__tui-checkbox:checked::after

參考文章:

react專案中整合redux

npm install redux npm install react redux npm install redux thunk 生成store 在專案初始化預設index檔案中設定.index.js import from redux const store createstore fn 匯入r...

react專案中的注意點

一 es6 的編譯方法 目前主流的瀏覽器還不支援es6。現在一般採用webpack 和 text babel 對jsx 語法進行編譯,編譯成正常的js語言。type text babel 這個是引用babel.js庫。二 react 中有個proptypes 在react中元件的屬性可以接受任意值,...

在專案中使用react

1.執行 cnpm install react react dom s react安裝包 專門用於建立元件和虛擬dom的,同時元件的生命週期都在這個包中 react dom安裝包 專門進行dom操作的,最主要的應用場景就是reactdom.render 2.在index.html頁面中建立容器 di...