重构-输入框(九种可自定义类型)

蔚落 2021-07-24 17:34 299阅读 0赞

动画效果:
    	提示框的伸缩效果
    	边框、图标hover变色效果
    	聚焦边框变色效果
    	禁用鼠标样式变成禁止效果
    
    设置提示框内容:
    	在传入的onChange回调中,来进行动态设置提示框内容的操作,第一个参数为当前输入框内容
    	因为回调已经做了500毫秒的防抖操作,故可直接设置tips的值即可
    	
    参数:
        width:PropTypes.string,					宽度
        height:PropTypes.string,				高度
        borderColor:PropTypes.string,   		边框色和图标颜色
        hoverBorderColor:PropTypes.string,		移上边框颜色
        focusBorderColor:PropTypes.string,		聚焦边框颜色
        fontSize:PropTypes.string,				输入框字体大小
        placeholder:PropTypes.string,			默认提示
        disabled:PropTypes.bool,				禁用
        prefixIcon:PropTypes.string,			前图标名称,前提将iconfont字体图标已引入到项目
        suffixIcon:PropTypes.string,			后图标名称,前提将iconfont字体图标已引入到项目
        prefixWidth:PropTypes.string,			前图标宽度
        suffixWidth:PropTypes.string,			后图标宽度
        iconSize:PropTypes.string,				图标大小
        clear:PropTypes.bool,					可以清空的输入框
        autoFocus:PropTypes.bool,				是否自动聚集光标
        borderRadius:PropTypes.string,			输入框圆角
        prefixIconColor:PropTypes.string,		前图标背景颜色
        suffixIconColor:PropTypes.string,		后图标背景颜色
        tips:PropTypes.array,					输入提示框,默认为点击聚焦就出现
        afterInput:PropTypes.bool, 				在输入后出现提示框
        tipWidth:PropTypes.string,				提示框宽度
        tipHeight:PropTypes.string,				提示框高度
        tipFontSize:PropTypes.string,			提示框字体大小
        tipLeft:PropTypes.string,				提示框位置
        tipBorderRadius:PropTypes.string,	    提示框圆角
        tipBorderColor:PropTypes.string,		提示框边框颜色
        tipTriangleLeft:PropTypes.string,		提示框三角位置
        tipTriangleWidth:PropTypes.string,		提示框三角大小
        onChange:PropTypes.func,				输入变化回调,第一个参数为输入框内容
        onFocus:PropTypes.func,					聚焦回调,第一个参数为输入框内容
        onBlur:PropTypes.func,					失焦回调,第一个参数为输入框内容
        onTipClick:PropTypes.func				点击提示框回调,第一个参数为点击索引,第二个参数为点击内容

效果图:  
![在这里插入图片描述][20201123191537341.png_pic_center]  
鼠标移入  
![在这里插入图片描述][20201123191546108.png_pic_center]  
鼠标选中  
![在这里插入图片描述][20201123191916790.png_pic_center]

禁用  
![在这里插入图片描述][20201123191720413.png_pic_center]  
可清空边框  
![在这里插入图片描述][20201123192755797.png_pic_center]  
明暗文切换密码框  
![在这里插入图片描述][20201123192849810.png_pic_center]  
![在这里插入图片描述][20201123192859884.png_pic_center]  
自定义前后图标输入框:  
![在这里插入图片描述][20201123193008588.png_pic_center]  
初次点击就会出现提示框:  
![在这里插入图片描述][20201123193356886.png_pic_center]  
输入内容才会出现提示框:

![在这里插入图片描述][20201123193514726.png_pic_center]

代码示例:  
使用:

import React,{ Component} from 'react'
    import Input from './input/input'
    
    class App extends Component{ 
        state={ 
            tips:['内容1','内容2','内容3','内容4','内容5','内容6']
        }
        _onChange(text)
        { 
            console.log(text)
            this.setState({ 
                tips:['变化1','变化2','变化3','变化4','变化5']
            })
        }
    
        _onBlur(text)
        { 
            console.log(text);
        }
    
        _onFocus(text)
        { 
            console.log(text);
        }
    
        _onTipClick(index,text)
        { 
            console.log(index);
            console.log(text);
        }
    
        render()
        { 
            const { tips} = this.state;
            return(
    
                <div>
                    { /* disabled afterInput type='password' clear*/}
                    <Input  type='password' onTipClick={ this._onTipClick.bind(this)} onFocus={ this._onFocus.bind(this)} onBlur={ this._onBlur.bind(this)} onChange={ this._onChange.bind(this)}  tips={ tips} fontSize='17px'  prefixWidth='40px'  suffixWidth='40px' prefixIcon='icon-yanjing'   placeholder='提示内容'></Input>
    
                    <Input hoverBorderColor='red' focusBorderColor='green' placeholder='提示内容'></Input>
    
                    <Input  disabled placeholder='提示内容'></Input>
    
                    <Input  clear placeholder='提示内容'></Input>
        
                    <Input  type='password' placeholder='提示内容'></Input>
    
                    <Input tips={ tips} afterInput onTipClick={ this._onTipClick.bind(this)} onFocus={ this._onFocus.bind(this)} onBlur={ this._onBlur.bind(this)} onChange={ this._onChange.bind(this)}  tips={ tips} fontSize='17px'  prefixWidth='40px'  suffixWidth='40px' prefixIcon='icon-yanjing'   placeholder='提示内容'></Input>
                </div>
            )
        }
    }
    
    export default App

input.jsx:

import React,{ Component} from 'react'
    import PropTypes from 'prop-types'
    import './input.css'
    
    
    class App extends Component{ 
    
        static propTypes={ 
            width:PropTypes.string,
            height:PropTypes.string,
            borderColor:PropTypes.string,   //边框色和图标颜色
            fontSize:PropTypes.string,
            placeholder:PropTypes.string,
            disabled:PropTypes.bool,
            prefixIcon:PropTypes.string,
            suffixIcon:PropTypes.string,
            prefixWidth:PropTypes.string,
            suffixWidth:PropTypes.string,
            iconSize:PropTypes.string,
            clear:PropTypes.bool,
            autoFocus:PropTypes.bool,
            borderRadius:PropTypes.string,
            prefixIconColor:PropTypes.string,
            suffixIconColor:PropTypes.string,
            hoverBorderColor:PropTypes.string,
            focusBorderColor:PropTypes.string,
            tips:PropTypes.array,
            afterInput:PropTypes.bool, //再输入后再出现提示框
            tipWidth:PropTypes.string,
            tipHeight:PropTypes.string,
            tipFontSize:PropTypes.string,
            tipLeft:PropTypes.string,
            tipBorderRadius:PropTypes.string,
            tipBorderColor:PropTypes.string,
            tipTriangleLeft:PropTypes.string,
            tipTriangleWidth:PropTypes.string,
            onChange:PropTypes.func,
            onFocus:PropTypes.func,
            onBlur:PropTypes.func,
            onTipClick:PropTypes.func
            
        }
    
        static defaultProps={ 
            width:'180px',
            height:'40px',
            fontSize:'16px',
            borderColor:'#ccc',
            borderRadius:'5px',
            prefixIconColor:'transparent',
            suffixIconColor:'transparent',
            tips:[]
        }
        
        componentDidMount()
        { 
            // console.log(this.inputf);
            const { hoverBorderColor,focusBorderColor,tipWidth,tipHeight,tipBorderColor,tipBorderRadius,tipFontSize,tipLeft,tipTriangleLeft,tipTriangleWidth,suffixWidth,tips,prefixWidth,afterInput,suffixIcon,prefixIcon,borderRadius,borderColor,iconSize,type,disabled} = this.props
            const inputf=this.inputf;
    
            //图标默认宽度
            suffixIcon&&inputf.style.setProperty('--suffixGap','15%');
            prefixIcon&&inputf.style.setProperty('--prefixGap','15%');
            //图标设置宽度
            suffixIcon&&suffixWidth&&inputf.style.setProperty('--suffixGap',suffixWidth);
            prefixIcon&&prefixWidth&&inputf.style.setProperty('--prefixGap',prefixWidth);
            //图标设置大小
            suffixIcon&&inputf.style.setProperty('--iconSize',iconSize);
            prefixIcon&&inputf.style.setProperty('--iconSize',iconSize);
            
            //hover、focus颜色
            hoverBorderColor&&inputf.style.setProperty('--hoverBorderColor',hoverBorderColor);
            focusBorderColor&&inputf.style.setProperty('--focusBorderColor',focusBorderColor);
    
            //禁用
            disabled&&inputf.style.setProperty('--hoverBorderColor',borderColor);
            
            //输入类型
            type=='password'&&(this.state.typeName='password');
    
            //搜索列表
            tips.length&&(this.setState({ tipList:tips}));
            //圆角
            borderRadius&&inputf.style.setProperty('--borderRadius',borderRadius);
            
            //是否输入后再出现提示框,默认false
            afterInput&&(this.setState({ isAfterInput:afterInput}));
    
            /* --tipWidth:提示框宽度 */
            /* --tipHeight:提示框高度 */
            /* --tipBorderColor:提示框边框颜色 */
            /* --tipFontSize:提示框字体大小*/
            /* --tipLeft:提示框位置 */
            /* --tipBorderRadius:提示框圆角 */
            /* --tipTriangleWidth:提示框三角大小 */
            /* --tipTriangleLeft:提示框三角位置*/
            tipWidth&&inputf.style.setProperty('--tipWidth',tipWidth);
            tipHeight&&inputf.style.setProperty('--tipHeight',tipHeight);
            tipBorderColor&&inputf.style.setProperty('--tipBorderColor',tipBorderColor);
            tipFontSize&&inputf.style.setProperty('--tipFontSize',tipFontSize);
            tipLeft&&inputf.style.setProperty('--tipLeft',tipLeft);
            tipBorderRadius&&inputf.style.setProperty('--tipBorderRadius',tipBorderRadius);
            tipTriangleWidth&&inputf.style.setProperty('--tipTriangleWidth',tipTriangleWidth);
            tipTriangleLeft&&inputf.style.setProperty('--tipTriangleLeft',tipTriangleLeft);
    
    
    
        }
        componentWillReceiveProps(newProps)
        { 
               
            if(JSON.stringify(this.state.tipList)!=JSON.stringify(newProps.tips))
            { 
                
                this.setState({ tipList:newProps.tips})
            }
        
            
        }
        
        componentWillUnmount()
        { 
            clearTimeout(this.state.timer);
        }
        
        state={ 
            inputFocused:false,
            inputValue:'',
            typeName:'text',
            tipList:[],
            timer:null,
            isAfterInput:false, //是否输入后再出现提示框,默认false
        }
    
        _onFocus()
        { 
            this.setState({ 
                inputFocused:true,
                isAfterInput:this.props.afterInput&&(this.state.inputValue==''?true:false)
            })
    
            this.props.onFocus(this.state.inputValue);
        }
        _onBlur()
        { 
            this.setState({ 
                inputFocused:false,
            })
            this.props.onBlur(this.state.inputValue);
        }
    
        _onChange(e)
        { 
            this.setState({ 
                inputValue:e.target.value
            })
            
            this.state.timer&&clearTimeout(this.state.timer);
            //防抖
            this.state.timer=setTimeout(()=>{ 
                if(this.state.isAfterInput)
                { 
        
                    this.setState({ 
                        isAfterInput:false
                    })
                }
                this.props.onChange(e.target.value);
            },200)
            
        }
    
        _onTipClick(index,text)
        { 
    
            this.setState({ 
                inputValue:text
            })
            
            this.props.onTipClick(index,text);
        }
    
        //后图标点击事件
        _suffixHandler()
        { 
            let inputf=this.inputf.children[1];
    
            if(this.props.clear)
            { 
                this.setState({ 
                    inputValue:''
                })
            }
            
            if(this.props.type=='password')
            { 
                this.state.typeName=='password'&&(this.setState({ typeName:'text'},()=>{ inputf.focus()}));
                this.state.typeName=='text'&&(this.setState({ typeName:'password'},()=>{ inputf.focus()}));
            }
            
            
    
        }
    
        render()
        { 
            let { inputFocused,inputValue,typeName,tipList,isAfterInput} = this.state;
            let { width,height,tips,prefixIconColor,suffixIconColor,autoFocus,disabled,fontSize,placeholder,prefixIcon,suffixIcon,clear,type} =this.props;
            
            clear&&(suffixIcon='icon-shanchu');
            type=='password'&&(typeName=='password'?(suffixIcon='icon-yanjing1'):(suffixIcon='icon-yanjing'))
    
            
            return(
    
                <div ref={ (inputf)=>this.inputf=inputf} className={ `jf-input-container ${ disabled&&'jf-input-disabled'}`} style={ { width,height,cursor:disabled&&'not-allowed'}}>
                    
                    { prefixIcon&&<span className={ `iconfont ${ prefixIcon} jf-input-icon-prefix`} style={ { cursor:disabled?'not-allowed':'pointer',backgroundColor:prefixIconColor}}></span>}
                    <input autoFocus={ autoFocus} type={ typeName} className={ `jf-input ${ disabled&&'jf-input-disabled'}`} value={ inputValue} disabled={ disabled} onChange={ this._onChange.bind(this)} style={ { fontSize}} placeholder={ placeholder}  onFocus={ this._onFocus.bind(this)} onBlur={ this._onBlur.bind(this)}/>
                    { suffixIcon&&<span className={ `iconfont ${ suffixIcon} jf-input-icon-suffix`} style={ { cursor:disabled?'not-allowed':'pointer',backgroundColor:suffixIconColor}} onClick={ ()=>{  !disabled&&this._suffixHandler()}}></span>}
                    { 
                        tipList.length!=0&&(
                            <div className={ 'jf-list-tip-container'+" "+(inputFocused&&!isAfterInput?'jf-list-tip-container-show':'jf-list-tip-container-hide')}>
                                <div className='jf-list-tip'>
                                    <div className='jf-list-tip-triangle'></div>
                                    <ul className='jf-list'>
                                        { 
                                            tipList.map((item,index)=>{ 
                                                return <li  key={ item+index} onClick={ ()=>{ this._onTipClick(index,item)}}>{ item}</li>
                                            })
                                        }
                                    </ul>
                                </div>
                            </div>
                        )
                    }
                </div>
            )
        }
    }
    
    export default App

input.css:

.jf-input-container{ 
        width: 180px;
        height: 40px;
        margin-left: 5px;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        position: relative;
        border-radius:var(--borderRadius,5px);
        --hoverBorderColor:#aaa;
        --focusBorderColor:#409EFF;
        --borderColor:#ccc;
        /* cursor: not-allowed; */
        /* --prefixGap: 控制前图标宽度和与输入内容间距*/ 
        /* --suffixGap: 控制后图标宽度和与输入内容间距*/
        /* --iconSize:图标大小 */
        /* --borderRadius:圆角*/
    
        /* --tipWidth:提示框宽度 */
        /* --tipHeight:提示框高度 */
        /* --tipBorderColor:提示框边框颜色 */
        /* --tipFontSize:提示框字体大小*/
        /* --tipLeft:提示框位置 */
        /* --tipBorderRadius:提示框圆角 */
        /* --tipTriangleWidth:提示框三角大小 */
        /* --tipTriangleLeft:提示框三角位置*/
        
    
    
    }
    .jf-input-container:hover .jf-input{ 
        border-color: var(--hoverBorderColor);
    }
    .jf-input{ 
        width: 100%;
        height: 100%;
        font-size: 16px;
        border: solid 1px var(--borderColor);
        outline: none;
        border-radius: var(--borderRadius,5px);;
        box-sizing: border-box;
        padding-left: calc(var(--prefixGap,5%) + 2%);
        padding-right:var(--suffixGap,0%);
        cursor: pointer;
        text-rendering: auto;
        text-align: start;
        
    }
    
    
    .jf-input-disabled{ 
        cursor: not-allowed;
    }
    .jf-input:hover{ 
        border-color: var(--hoverBorderColor);
    }
    
    .jf-input:focus{ 
        border-color:var(--focusBorderColor) !important;
    }
    
    .jf-input-icon-prefix{ 
        height: 100%;
        width: var(--prefixGap,15%);
        position: absolute;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        color:var(--borderColor);
        font-size: var(--iconSize,20px);
        border-bottom-left-radius: var(--borderRadius,5px);
        border-top-left-radius: var(--borderRadius,5px);
        
    }
    
    .jf-input-icon-suffix{ 
        height: 100%;
        width: var(--suffixGap,15%);
        position: absolute;
        text-align: center;
        display: flex;
        right: 0;
        align-items: center;
        justify-content: center; 
        color:var(--borderColor);
        margin-right: 0;
        font-size: var(--iconSize,20px);
        border-top-right-radius: var(--borderRadius,5px);
        border-bottom-right-radius: var(--borderRadius,5px);
    
    }
    .jf-input-icon-prefix:hover{ 
        color:var(--hoverBorderColor);
    }
    .jf-input-icon-suffix:hover{ 
        color:var(--hoverBorderColor);
    }
    
    .jf-list-tip-container{ 
        position: absolute;
        width: var(--tipWidth,120px);
        height: 0;
        top:120%;
        left: var(--tipLeft,0);
        display: flex;
        opacity: 0;
        z-index: 99;
    }
    
    .jf-list-tip-container-show{ 
        opacity: 1;
        height: var(--tipHeight,120px);
        transition:opacity .1s .1s,height .5s ;
    }
    
    .jf-list-tip-container-hide{ 
        opacity: 0;
        height: 0px;
        transition:height .5s .1s,opacity 0s .25s;
        
    }
    
    .jf-list-tip{ 
        position: relative;
        height: 100%;
        width: 100%;
        display: flex;
        /* box-sizing: border-box; */
    }
    
    .jf-list-tip-triangle{ 
        position: absolute;
        width: 0;
        height: 0;
        left: var(--tipTriangleLeft,var(--prefixGap,5%));
        box-sizing: border-box;
        border-top-width: 0px;
        border-right-width:var(--tipTriangleWidth,6px);
        border-bottom-width: var(--tipTriangleWidth,6px);
        border-left-width:var(--tipTriangleWidth,6px);
    
        border-top-color: transparent;
        border-right-color: transparent;
        border-bottom-color:var(--tipBorderColor,#ccc);
        border-left-color: transparent;
    
        border-style: solid;
    
    }
    
    .jf-list-tip-triangle::after{ 
        content: " ";
        box-sizing: border-box;
        position: absolute;
        top: 1px;
        left: 0;
        margin-left:calc(0px - var(--tipTriangleWidth,6px));
        border-width: var(--tipTriangleWidth,6px);
        border-right-width: var(--tipTriangleWidth,6px);
        border-bottom-width: var(--tipTriangleWidth,6px);
        border-left-width:var(--tipTriangleWidth,6px);
        border-top-width: 0;
        border-bottom-color: #fff;
    
        width: 0;
        height: 0;
        border-top-color: transparent;
        border-right-color: transparent;
        border-left-color: transparent;
        border-style: solid;
        
    }
    
    .jf-list{ 
        width: 100%;
        padding-left: 0%;
        box-sizing: border-box;
        margin-top:var(--tipTriangleWidth,6px);;
        background-color: white;
        border:solid 1px var(--tipBorderColor,#ccc);;
        border-radius:var(--tipBorderRadius,5px);
        list-style: none;
        overflow-y:scroll;
        /* padding-bottom: 20px; */
    }  
    
    .jf-list>li{ 
        padding-left: 5%;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        cursor: pointer;
        font-size:var(--tipFontSize,16px);
    }
    .jf-list>li:hover
    { 
        background-color: #F5F7FA;
    }
    .jf-list::-webkit-scrollbar { 
        width: 5px;
        background-color: transparent;
    }
    .jf-list::-webkit-scrollbar-thumb { 
        border-radius: 20px;
        background-color: #D0D0D1;
    }
    .jf-list::-webkit-scrollbar-track { 
        
        /* background-color: white; */
        background-color: transparent;
        border-radius: 5px;
    }

[20201123191537341.png_pic_center]: /images/20210724/b252453593bd4720aa344521c0b2bbb2.png
[20201123191546108.png_pic_center]: /images/20210724/dcb2dde39cc14bdfa7ac13f7568dd8bc.png
[20201123191916790.png_pic_center]: /images/20210724/7cc51e8350ec43c8b5de58675e98862c.png
[20201123191720413.png_pic_center]: /images/20210724/b81f62047b7f46b29a38d86f013cf426.png
[20201123192755797.png_pic_center]: /images/20210724/cd37918b3ff04887aadb873e9c388121.png
[20201123192849810.png_pic_center]: /images/20210724/6c2b775b8dc8459cacc36f31e9212b7c.png
[20201123192859884.png_pic_center]: /images/20210724/ac6f278367cf4011b193439475a13647.png
[20201123193008588.png_pic_center]: /images/20210724/134275b304ab4b8eb61d9c7b0a2ef4da.png
[20201123193356886.png_pic_center]: /images/20210724/e42be438b7114e999edd924c7716407c.png
[20201123193514726.png_pic_center]: /images/20210724/7da370852c3f410695d5b5001ba64065.png