前端项目实战之文本标签和特殊文字组件(很简单)

一、特别标签

• 组件名： TagComp
• 入口文件：index.tsx
• 样式文件：index.module.less

index.tsx

import type {
    
     CSSProperties, ReactDOM } from 'react';
import cs from 'classnames';

import Style from './index.module.less';

interface PropsType {
    
    
  children: string | ReactDOM;
  style?: CSSProperties;
  className?: string;
  theme?: 'default' | 'warning' | 'error' | 'success' | 'grey';
}

const TagComp = (props: PropsType) => {
    
    
  const {
    
     children, style, className, theme = 'default' } = props;
  return (
    <>
      {
    
    children && (
        <span
          className={
    
    cs(Style.tagComp, theme && Style[`tagComp_${
      
      theme}`], className)}
          style={
    
    style}
        >
          {
    
    children}
        </span>
      )}
    </>
  );
};

export default TagComp;

index.module.less

.tagComp {
    
    
  padding: 2px 8px;
  font-weight: 400;
  font-size: 12px;
  border-radius: 4px;
}

.tagComp_default {
    
    
  background-color: #e6f0fc;
  color: #006BE1;
}

.tagComp_success {
    
    
  background-color: #e6f8ee;
  color: #06B752;
}

.tagComp_warning {
    
    
  background-color: #fff4e5;
  color: #FF9500;
}

.tagComp_grey {
    
    
  background-color: #edf1f2;
  color: #31456A;
}

二、文案标签

• 组件名： PhotoPreview
• 入口文件：index.tsx
• 样式文件：index.module.less

index.tsx

import type {
    
     CSSProperties, ReactDOM } from 'react';
import {
    
     useCallback } from 'react';
import {
    
     useMemo } from 'react';
import cs from 'classnames';

import Style from './index.module.less';

interface PropsType {
    
    
  onClick?: () => void;
  children: string | ReactDOM;
  fontSize?: string;
  style?: CSSProperties;
  className?: string | undefined;
  theme?: 'default' | 'warning' | 'error' | 'success';
}

const TextComp = (props: PropsType) => {
    
    
  const {
    
     children, fontSize = '14px', style = {
    
    }, className, theme = 'default', onClick } = props;
  const thisStyle = useMemo(() => {
    
    
    if (onClick) Object.assign(style, {
    
     cursor: 'pointer' });
    Object.assign(style, {
    
     fontSize });
    return style;
  }, [onClick, style, fontSize]);

  const isNil = useCallback(
    (value: any) => value === undefined || value === null || value === '',
    []
  );

  return (
    <>
      {
    
    !isNil(children) && (
        <span
          onClick={
    
    onClick}
          className={
    
    cs(Style.textComp, theme && Style[`textComp_${
      
      theme}`], className)}
          style={
    
    thisStyle}
        >
          {
    
    children}
        </span>
      )}
    </>
  );
};

export default TextComp;

index.module.less

.textComp {
    
    
  font-weight: 400;
  font-size: 13px;
}

.textComp_default {
    
    
  color: #0068FF;
}

.textComp_success {
    
    
  color: #06B752;
}

.textComp_warning {
    
    
  color: #FF9000;
}

.textComp_error {
    
    
  color: #f31515;
}

组件使用

该组件比较简单，使用也比较简单，就不举例了，不懂可以到评论去问哦！