文章目录
使用scss循环样式代码,减少代码量
1、首先定义一个scss变量用于存储所有的type类型
$type:('success', 'primary', 'danger', 'warning', 'info', 'default');
2、其次定义一个scss自定义函数用于 return 对应的数据变量类型
因为我在这边对应使用了全局变量 下方是其数据对应
名称 | 颜色 |
---|---|
$color-primary | #1089ff |
$color-success | #52c41a |
$color-info | #35495E |
$color-warning | #fea638 |
$color-danger | #ff4d4f |
$color-primary : #1089ff;
$color-success :#52c41a;
$color-info : #35495E;
$color-warning : #fea638;
$color-danger : #ff4d4f;
@function typeFunction($t) {
@if $t==success {
@return $color-success
}
@else if $t==primary {
@return $color-primary
}
@else if $t==info {
@return $color-info
}
@else if $t==danger {
@return $color-danger
}
@else if $t==warning {
@return $color-warning
}
@return $color-primary
}
3、最后也就是对应type类型所展示的代码
@each $t in $type {
.radio-type_#{$t} {
width: 20px;
height: 20px;
appearance: none;
position: relative;
outline: none;
}
.radio-type_#{$t}:before {
content: "";
width: 75%;
height: 75%;
border: 1px solid typeFunction($t);
display: inline-block;
border-radius: 50%;
vertical-align: middle;
}
.radio-type_#{$t}:checked:before {
content: "";
width: 75%;
height: 75%;
border: 1px solid typeFunction($t);
display: inline-block;
border-radius: 50%;
vertical-align: middle;
}
.radio-type_#{$t}:checked:after {
content: "";
width: 45%;
height: 45%;
text-align: center;
background: typeFunction($t);
border-radius: 50%;
display: block;
position: absolute;
top: 20%;
left: 20%;
}
.radio-type_#{$t}:checked+label {
color: typeFunction($t);
}
}
4、完整代码+对应react代码及呈现效果
css
$type:('success', 'primary', 'danger', 'warning', 'info', 'default');
$color-primary : #1089ff;
$color-success :#52c41a;
$color-info : #35495E;
$color-warning : #fea638;
$color-danger : #ff4d4f;
@function typeFunction($t) {
@if $t==success {
@return $color-success
}
@else if $t==primary {
@return $color-primary
}
@else if $t==info {
@return $color-info
}
@else if $t==danger {
@return $color-danger
}
@else if $t==warning {
@return $color-warning
}
@return $color-primary
}
@each $t in $type {
.radio-type_#{$t} {
width: 20px;
height: 20px;
appearance: none;
position: relative;
outline: none;
}
.radio-type_#{$t}:before {
content: "";
width: 75%;
height: 75%;
border: 1px solid typeFunction($t);
display: inline-block;
border-radius: 50%;
vertical-align: middle;
}
.radio-type_#{$t}:checked:before {
content: "";
width: 75%;
height: 75%;
border: 1px solid typeFunction($t);
display: inline-block;
border-radius: 50%;
vertical-align: middle;
}
.radio-type_#{$t}:checked:after {
content: "";
width: 45%;
height: 45%;
text-align: center;
background: typeFunction($t);
border-radius: 50%;
display: block;
position: absolute;
top: 20%;
left: 20%;
}
.radio-type_#{$t}:checked+label {
color: typeFunction($t);
}
}
js
import React, { useEffect } from 'react'
import './index.scss'
interface Iprops {
type: string
}
// const classnames = require('classnames')
function Radio(props: any) {
const { type = 'default' }: Iprops = props
// 声明一个名为“count”的新状态变量
// const [count, setCount] = useState(0)
// 类似于 componentDidMount 和 componentDidUpdate:
useEffect(() => {
// 使用浏览器API更新文档标题
document.title = `You clicked count times`
}, [])
return (
<div className={['tb-radio'].join(' ')}>
<input type='radio' className={[`radio-type_${type}`].join(' ')} />
</div>
)
}
export default Radio
最终效果
最终的样式也就呈现上去了,写在最后最近也是在尝试使用 react-hook 尝试去写一套组件库,后续也会开展轮子公开课程,从零开始如何造轮子组件展现在博客上,希望大家后续可以多多支持,多多关注,一起共同进步。