重构-圆角消息提示(右上角)

电玩女神 2021-07-24 19:14 404阅读 0赞

动画:
    	消息出现/消失渐变
    
    参数:
    	  value:PropTypes.oneOfType([PropTypes.string,PropTypes.number]),	要显示的内容
    	  hidden:PropTypes.bool,		是否隐藏,默认为false
    	  dot:PropTypes.bool,			消息是否为一个圆点,此时不设置value
    	  height:PropTypes.string,		圆角高度
    	  fontSize: PropTypes.string,   消息文字大小
    	  padding: PropTypes.string,    消息文字左右间距
    	  color: PropTypes.string,      消息背景色
    	  fontColor: PropTypes.string,	消息文字颜色
    
    使用:
    	<Badge 
    		参数
    	>
    		要使用提示消息的组件
    	</Badge>

效果图:  
![在这里插入图片描述][20201214164807860.png]  
![在这里插入图片描述][20201214164818281.png]  
![在这里插入图片描述][20201214164847868.png]  
![在这里插入图片描述][20201214164915819.png]  
![在这里插入图片描述][20201214164936733.png]  
代码示例:  
使用:

import React,{ useState} from 'react'
    import Badge from './badge/badge'
    
    function App() { 
    
      const [flag, setFlag] = useState(false);
    
      const _click =function(){ 
        setFlag(!flag);
      }
    
    
        <div onClick={ _click}>
    
          <Badge hidden={ flag} value={ 'news'}>
          
            <div style={ { width:'80px',height:'40px',backgroundColor:'skyblue'}}>
              消息
            </div>
            
          </Badge>
          
        </div>
      )
    }
    
    export default App

Badge.jsx:

import React, {  useState,useEffect,useCallback,useRef } from 'react'
    import PropTypes from 'prop-types'
    import './badge.css'
    
    function App(props) { 
      
      const badgef = useRef(null);
    
      useEffect(() => { 
        
        _styleHandler('height');
        _styleHandler('fontSize');
        _styleHandler('padding');
        _styleHandler('color');
        _styleHandler('fontColor');
    
      }, [props.value])
      
      // 统一样式处理
      const _styleHandler = useCallback((key) => { 
        props[key] && badgef.current.style.setProperty('--' + key, props[key])
        
      }, [])
    
      return(
    
        <div className='jf-badge-container' ref={ badgef}>
          <div className='jf-badge-item'>
            { props.children}
            <sup className={ `${ props.dot ? 'jf-badge-news-dot' : 'jf-badge-news'} ${ props.hidden && 'jf-badeg-hide'}`}>{  props.value }</sup>
          </div>
        </div>
      )
    }
    
    App.propTypes = { 
      value:PropTypes.oneOfType([PropTypes.string,PropTypes.number]),
      hidden: PropTypes.bool,
      dot:PropTypes.bool,
      height:PropTypes.string,
      fontSize: PropTypes.string,
      padding: PropTypes.string,
      color: PropTypes.string,
      fontColor: PropTypes.string,
    }
    
    App.defaultProps = { 
      hidden:false
    }
    
    export default React.memo(App)

Badge.css:

.jf-badge-container { 
      display: inline-block;
    
      --height: 18px;
      --fontSize: 12px;
      --padding: 6px;
      --color: red;
      --fontColor: white;
    }
    
    .jf-badge-item { 
      display: flex;
      position: relative;
    }
    
    .jf-badge-news { 
      position: absolute;
      top: 0;
      right: 10px;
      transform: translateY(-50%) translateX(100%);
      background-color: var(--color);
      height: var(--height);
      text-align: center;
      font-size: var(--fontSize);
      padding: 0 var(--padding);
      border-radius: var(--height);
      color: var(--fontColor);
      opacity: 1;
      transition: 0.5s opacity;
    }
    
    .jf-badge-news::after { 
      content: " ";
      display: inline-block;
      width: 0;
      height: 100%;
      vertical-align: middle;
    }
    
    .jf-badge-news-dot { 
      position: absolute;
      top: 0;
      right: 5px;
      transform: translateY(-50%) translateX(100%);
      background-color: var(--color);
      height: 8px;
      width: 8px;
      text-align: center;
      font-size: var(--fontSize);
      border-radius: var(--height);
      color: var(--fontColor);
      opacity: 1;
      transition: 0.5s opacity;
    }
    
    .jf-badeg-hide { 
      opacity: 0;
    }

[20201214164807860.png]: /images/20210724/ebdab54079e94f3aa13265d4a422ca64.png
[20201214164818281.png]: /images/20210724/a6636d4cf9fc4a9eb725bd196f0b8a9d.png
[20201214164847868.png]: /images/20210724/989db3a4e87e487aba45bebe4bdc0f5d.png
[20201214164915819.png]: /images/20210724/4ae31af0aebb44149f4680244ec6adc7.png
[20201214164936733.png]: /images/20210724/daf2ba05288c4548802a36d5cda924db.png