重构-开关Switch 素颜马尾好姑娘i 2021-07-24 13:00 394阅读 0赞 收获: 当给根类设置transition:ns时,当根类的属性变化都会产生过渡态,即当再添加一个类,这个类出现/消失会出现两种过渡态 动画: 按钮移动、轨道颜色渐变 参数: static propTypes={ trackWidth:PropTypes.string, 开关轨道宽度 trackHeight:PropTypes.string, 开关轨道高度 circleWidth:PropTypes.string, 圆圈宽度 gap:PropTypes.string, 圆圈距离两边的距离 trackCheckedkColor:PropTypes.string,开启轨道颜色 circleColor:PropTypes.string, 圆圈颜色 trackColor:PropTypes.string, 轨道未选中颜色 disabled:PropTypes.bool, 禁用 checked:PropTypes.bool, 选中 onChange:PropTypes.func 开关回调,第一个参数为当前状态布尔值 } 效果图: ![在这里插入图片描述][20201124232428105.png_pic_center] 使用: import React,{ Component} from 'react' import Switch from './switch/switch' class App extends Component{ _onChange(checked) { console.log(checked); } render() { return( <div> <Switch gap='20px' onChange={ this._onChange.bind(this)} checked /> <Switch gap='20px' onChange={ this._onChange.bind(this)} disabled /> </div> ) } } export default App Switch.jsx: import React,{ Component} from 'react' import PropTypes from 'prop-types' import './switch.css' class App extends Component{ static propTypes={ trackWidth:PropTypes.string, trackHeight:PropTypes.string, circleWidth:PropTypes.string, gap:PropTypes.string, trackCheckedkColor:PropTypes.string, circleColor:PropTypes.string, trackColor:PropTypes.string, disabled:PropTypes.bool, checked:PropTypes.bool, onChange:PropTypes.func } state={ isChecked:false } componentDidMount() { const { disabled,checked,trackCheckedkColor,trackHeight,trackWidth,circleColor,circleWidth,gap,trackColor} = this.props; const switchf=this.switchf.style; trackCheckedkColor&&switchf.setProperty('--trackCheckedkColor',trackCheckedkColor); trackHeight&&switchf.setProperty('--trackHeight',trackHeight); circleWidth&&switchf.setProperty('--circleWidth',circleWidth); gap&&switchf.setProperty('--gap',gap); trackWidth&&switchf.setProperty('--trackWidth',trackWidth); circleColor&&switchf.setProperty('--circleColor',circleColor); trackColor&&switchf.setProperty('--trackColor',trackColor); checked&&this.setState({ isChecked:true}); disabled&&switchf.setProperty('--circlePointer','not-allowed'); } _switchClick() { if(!this.props.disabled) { this.setState({ isChecked:!this.state.isChecked },()=>{ this.props.onChange(this.state.isChecked); }) } } render() { let { isChecked} = this.state; const { disabled} = this.props; return( <div ref={ (v)=>{ this.switchf=v}} className='jf-switch-container'> <div className={ `jf-switch-track ${ isChecked&&'jf-switch-track-checked'} ${ disabled&&'jf-switch-disabled'} `}> </div> <div onClick={ this._switchClick.bind(this)} className={ `jf-switch-circle ${ isChecked&&'jf-switch-checked'}`}> </div> </div> ) } } export default App Switch.css: .jf-switch-container{ position: relative; width: var(--trackWidth,40px); height:var(--trackHeight,25px); border-radius: var(--trackHeight,25px); display: inline-block; box-sizing: border-box; --trackWidth:40px; --trackHeight:20px; --circleWidth:16px; --gap:2px; --trackCheckedkColor:#13CE66; --circleColor:white; --trackColor:#EAECF0; --circlePointer:pointer; } .jf-switch-track{ width: 100%; height: 100%; border-radius: var(--trackWidth,40px); background-color: var(--trackColor); overflow: hidden; transition: 1s; } .jf-switch-track-checked{ background-color: var(--trackCheckedkColor); } .jf-switch-circle{ position: absolute; height:var(--circleWidth,16px); width: var(--circleWidth,16px); left: var(--gap,5px); border-radius: 100%; background-color: var(--circleColor); cursor: var(--circlePointer); top:50%; transition: .5s; transform: translateY(-50%); } .jf-switch-checked{ left: 100%; margin-left: calc(-1 * var(--circleWidth) + -1 * var(--gap)); } .jf-switch-disabled{ background-color: #EAECF0; cursor: var(--circlePointer); } [20201124232428105.png_pic_center]: /images/20210724/f3520717e19446d6a15e24974b37013f.png
还没有评论,来说两句吧...