React 组件之 Tag 组件

这次我们来实现一个常用的 tag 组件，this带你来体验体验， Go， 话不多说，先放图片

tag 组件实现起来比较简单，主要支持关闭，切换颜色，展示关闭操作，以及关闭后的回调

/**
 *
 *  color: 设置标签颜色
 *  visible: 标签是否显示  true
 *  closable： 标签是否可以关闭（点击默认关闭） false
 *  onClose: 关闭会调
 *  icon: Icon
 */
import { useState } from 'react';
import styles from './index.less';
import classnames from 'classnames';

interface IPropsTag {
  color?: string;
  visbile?: boolean;
  closable?: boolean;
  onClose?: () => void;
  icon?: React.ReactNode;
}

export const Tag: React.FC<IPropsTag> = (props) => {

  const { color, visbile = true, closable = false, onClose, icon } = props;

  const [showTag, setShowTag] = useState(visbile);

  const handleClose = () => {
    onClose && onClose();
    setShowTag(false);
  };

  return (
    <div
      className={classnames(styles.OwnTag, color ? styles.hasuserColor : '')}
      style={{
        display: !showTag ? 'none' : 'visible',
        backgroundColor: color,
      }}
    >
      // ICON
      {icon && <span style={{ marginRight: 4 }}>{icon}</span>}
      // Children
      <span className={styles.TagTextOwn}>{props.children}</span>
      // 关闭按钮
      {closable && (
        <span className={styles.closeBtn} onClick={handleClose}>
          x
        </span>
      )}
    </div>
  );
};

我们添加对应的样式

.OwnTag {
  display: inline-block;
  margin-bottom: 0 8px 8px 0;
  padding: 0 7px;
  font-size: 12px;
  line-height: 20px;
  white-space: nowrap;
  background-color: #fafafa;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  &.hasuserColor {
    color: #fff;
    background-color: transparent;
    .TagTextOwn {
      font-weight: 600;
    }
    .closeBtn {
      margin-left: 4px;
      color: rgba(255, 255, 255, 0.8);
      cursor: pointer;
    }
  }
  .closeBtn {
    margin-left: 4px;
    color: rgba(0, 0, 0, 0.8);
    cursor: pointer;
  }
}

好，现在我们来使用一下

import {
  MinusCircleOutlined,
} from '@ant-design/icons';
import { Tag } from './Tag';

const TestTag = () => {
  return (
    <div>
      <h1>tag:</h1>
      <Tag color={'red'} icon={<MinusCircleOutlined />} onClose={() => console.log('xxx')} closable>
        success
      </Tag>
    </div>
  );
};

export default TestTag;

大功告成 !!! 如果对你有帮助，就请点个赞吧👍