ps-frame-father/es/components/Tag/index.js

An enterprise-class UI design language and React components implementation

import React from 'react';
import classnames from 'classnames';
import "./index.css";
/**
 * 标签组件
 * @param {closable} boolean 是否可关闭
 * @param {onClose} func 标签关闭时的回调
 * @param {color} string 标签的颜色,不设置则为默认颜色
 */

export default function Tag(props) {
  var children = props.children,
      closable = props.closable,
      onClose = props.onClose,
      color = props.color;
  var tag = /*#__PURE__*/React.createRef();

  var handleClose = function handleClose() {
    onClose && onClose();
    tag.current.style.display = 'none';
  };

  return /*#__PURE__*/React.createElement("div", {
    className: classnames('xTag', color ? 'xTagHasColor' : ''),
    style: {
      backgroundColor: color
    },
    ref: tag
  }, children, closable && /*#__PURE__*/React.createElement("span", {
    className: "closeBtn",
    onClick: handleClose
  }, "x"));
}