重构-标签(多元)

r囧r小猫 2021-07-24 20:38 235阅读 0赞

动画:
    	删除图标的移入移出颜色渐变
    	添加标签后,添加的标签伸缩变化(实际是旋转实现)
    		设置索引来指向添加的标签,为其添加一个类,类使用帧动画(才能一开始就加载动画)
    		
    添加标签的实现:
    	动态切换添加按钮和输入框
    	输入内容后,光标消失时,将不为空的内容放进数组,重新渲染
    	
    参数:
    	  tags: PropTypes.array,		标签数组,格式为[{name:'标签名',type{color:'背景色',borderColor:'边框色',fontColor:'字体颜色'}}]
    	  delete: PropTypes.bool,		标签是否可删除
    	  add:PropTypes.bool,			标签是否可添加
    	  onDelete: PropTypes.func,		删除回调,参数为删除后的数组
    	  onTagClick: PropTypes.func,	点击标签回调,第一个参数为标签索引,第二个参数为标签内容
    	  onAdd:PropTypes.func,         添加回调,参数为添加标签后的数组
    	  width: PropTypes.string,      标签总体容器的宽度,用于换行,默认不设置不换行
    	  height: PropTypes.string,		标签高度
    	  borderRadius: PropTypes.string,	标签圆角
    	  fontSize:PropTypes.string,		标签字体大小
    	  marginRight: PropTypes.string,	标签距离右间距
    	  marginBottom: PropTypes.string,   标签底间距
    	  iconColor: PropTypes.string,		图标背景颜色
    	  hoverIconColor: PropTypes.string, 鼠标hover图标背景颜色

效果图:  
![在这里插入图片描述][20201206213032918.png]  
![在这里插入图片描述][20201206213049411.png]  
![在这里插入图片描述][20201206213102391.png]  
![在这里插入图片描述][20201206213118542.png]  
![在这里插入图片描述][20201206213127345.png]  
![在这里插入图片描述][202012062132095.png]  
代码示例:  
使用:

import React,{ useState} from 'react'
    import Tag from './tag/tag'
    
    // type:{color:'red',borderColor:'orange',fontColor:'green'}
    
    const tags = [{  name: '标签一'},
      {  name: '标签二'},
      {  name: '标签三'},
      { name:'标签四'}
    
    ]
    
    function App(){ 
    
      const onDelete = function (data)
      { 
        console.log(data)
      }
    
      const onTagClick = function (index, name)
      { 
        console.log(name);
        console.log(index);
      }
    
      const onAdd = function (data)
      { 
        console.log(data);
      }
    
      return(
    
        <div>
          <Tag width='200px'  onAdd={ onAdd} onDelete={ onDelete} onTagClick={ onTagClick} tags={ tags} delete add></Tag>
        </div>
      )
    }
    
    export default App

tag.jsx:

import React, {  useState,useCallback,useEffect,useRef } from 'react'
    import PropTypes from 'prop-types'
    import './tag.css'
    
    function App(props) { 
      
      const [tags, setTags] = useState([]);
      const [newTag, setNewTag] = useState(false);
      const [addIndex, setAddIndex] = useState(-1);
      const tagf = useRef(null);
      const inputf = useRef(null);
    
    
      useEffect(() => { 
        setTags(props.tags);
    
        _styleHandler('width', props.width);
        _styleHandler('height', props.height);
        _styleHandler('borderRadius', props.borderRadius);
        _styleHandler('fontSize', props.fontSize);
        _styleHandler('marginRight', props.marginRight);
        _styleHandler('marginBottom', props.marginBottom);
        _styleHandler('iconColor', props.iconColor);
        _styleHandler('hoverIconColor', props.hoverIconColor);
    
      }, [props.tags])
      
      //统一初始化处理
      const _styleHandler = useCallback((key, value) => { 
        // console.log(props[keys]);
        props[key] && tagf.current.style.setProperty('--' + key, value)
        
      },[])
    
      // 删除
      const _delete = useCallback((index) => { 
        
        tags.splice(index, 1);
        setTags([...tags]);
    
        props.onDelete(tags);
    
    
      },[tags])
    
      // 点击
      const _clickhandler = useCallback((index,name) => { 
        props.onTagClick(index, name);
      }, [])
      
    
      // 添加
      const _addTagItem =useCallback(() => { 
        setNewTag(true);
    
    
      },[inputf])
    
      //光标消失,统一处理数据
      const _onBlur = useCallback(() => { 
        let value=inputf.current.value
        if (value !== '')
        { 
          tags.push({  name: value })
          setTags([...tags]);
          setAddIndex(tags.length - 1);
          
          props.onAdd(tags);
        }
        setNewTag(false);
        inputf.current.value = '';
    
      }, [tags])
      
      //回车事件
      const _onKeyUp = useCallback((e) => { 
        if (e.keyCode === 13)
        { 
          inputf.current.blur();
          setNewTag(false);
        }
        
      }, [tags])
      
      return(
        
        <div ref={ tagf} className='jf-tag-container'>
          <div className='jf-tag-layout'>
            { 
                  
              tags.map((item, index) => { 
                
                return (
                  <div className={ `jf-tag-item ${ (addIndex==index)&&'jf-tag-item-add'} `} key={ item + index}
                    style={ { 
                      backgroundColor:item.type?(item.type.color ? item.type.color:props.color):props.color,
                      borderColor: item.type?(item.type.borderColor?item.type.borderColor:props.borderColor):props.borderColor,
                      color:item.type?(item.type.fontColor?item.type.fontColor:props.fontColor):props.fontColor,
                    }}
                  
                  >
                    <span onClick={ () => {  _clickhandler(index,item.name) }} className='jf-tag-item-name'>{ item.name}</span>
                    { props.delete && <i onClick={ () => {  _delete(index) }} className='jf-tag-delete iconfont icon-shanchu'></i>}
                  </div>   
                )
              })
            }
            { props.add && <input className='jf-tag-input' style={ {  display: newTag ? 'block' : 'none' }} ref={ inputf} onBlur={ _onBlur} onKeyUp={ _onKeyUp} autoFocus type="text" />}
            { props.add && <div
              className='jf-tag-item jf-tag-item-new'
              style={ {  display: newTag ? 'none' : 'block' }}
              onClick={ (e) => {  _addTagItem(e) }}>
              <span className='jf-tag-item-name'>+新增</span>
            </div>}
    
          </div>
        </div>
      )
    }
    
    App.propTypes = { 
      tags: PropTypes.array,
      delete: PropTypes.bool,
      add:PropTypes.bool,
      onDelete: PropTypes.func,
      onTagClick: PropTypes.func,
      onAdd:PropTypes.func,
      width: PropTypes.string,
      height: PropTypes.string,
      borderRadius: PropTypes.string,
      fontSize:PropTypes.string,
      marginRight: PropTypes.string,
      marginBottom: PropTypes.string,
      iconColor: PropTypes.string,
      hoverIconColor: PropTypes.string,
    }
    
    App.defaultProps = { 
      tags: [],
      onDelete: () => { },
      onTagClick: () => {  },
      onAdd:()=>{ },
      color: '#ecf5ff',
      borderColor: '#d9ecff',
      fontColor: '#409eff',
    }
    
    export default React.memo(App)

tag.css:

.jf-tag-container { 
      display: inline-block;
      box-sizing: border-box;
    
      --width: 100%;
      --height: 38px;
      --color: #ecf5ff;
      --borderColor: #d9ecff;
      --borderRadius: 5px;
      --fontColor: #409eff;
      --fontSize: 12px;
      --marginRight: 20px;
      --marginBottom: 5px;
      --iconColor: #ddd;
      --hoverIconColor: #ccc;
    }
    
    .jf-tag-layout { 
      display: flex;
      flex-wrap: wrap;
      width: var(--width);
    }
    
    .jf-tag-item { 
      position: relative;
      box-sizing: border-box;
      height: var(--height);
      color: var(--fontColor);
      line-height: var(--height);
      background-color: var(--color);
      border: solid 1px var(--borderColor);
      border-radius: var(--borderRadius);
      display: flex;
      justify-content: space-between;
      font-size: var(--fontSize);
      margin: 0 var(--marginRight) var(--marginBottom) 0;
    }
    
    .jf-tag-item-add { 
      animation: scale 0.5s;
    }
    
    .jf-tag-input { 
      outline: none;
      border: solid 1px #409eff;
      height: var(--height);
      width: 89px;
      border-radius: var(--borderRadius);
    }
    
    .jf-tag-item-new { 
      cursor: pointer;
    }
    
    @keyframes scale { 
      from { 
        transform: rotateY(90deg);
      }
      to { 
        transform: rotateY(0deg);
      }
    }
    .jf-tag-item-name { 
      display: inline-block;
      flex: 1;
      text-align: center;
      padding: 0 5px;
    }
    
    .jf-tag-delete { 
      margin: 0;
      padding-right: 2px;
      color: var(--iconColor);
      /* position: absolute; */
      /* right: 2px; */
    }
    
    .jf-tag-delete:hover { 
      color: var(--hoverIconColor);
      cursor: pointer;
    }

[20201206213032918.png]: /images/20210724/638e9a6e684648d3bda4b8e962d2701b.png
[20201206213049411.png]: /images/20210724/c81b420f57ff4adc8b688324447063a2.png
[20201206213102391.png]: /images/20210724/ce85e6d9420f4b23b6e88d29714b22eb.png
[20201206213118542.png]: /images/20210724/9d690a5ae6d64214810c0e2547a12d3f.png
[20201206213127345.png]: /images/20210724/bffe54cdb76d4b38a4f8f38d667a0b23.png
[202012062132095.png]: /images/20210724/c283b71a77f747f993de1abca82ee5f5.png