mp-colorui/dist/h5/components/text/index.js

MP ColorUI 是一款基于 Taro 框架并且联合 Color-UI CSS 库开发的多端 UI 组件库（目前仅支持小程序端）

import Nerv from "nervjs";
import { Text, View } from '@tarojs/components';
import { Component } from "@tarojs/taro-h5";
import { BG_COLOR_LIST, SIZE, TEXT_COLOR_LIST } from "../utils/model";
const SPECIAL_CLASS = {
  firstUpper: 'text-Abc',
  upper: 'text-ABC',
  lower: 'text-abc'
};
export default class ClText extends Component {
  render() {
    const size = this.props.size || 'normal';
    const sizeClassName = `text-${SIZE[size === 'normal' ? 'df' : size]}`;
    const textColorClassName = this.props.textColor ? TEXT_COLOR_LIST[this.props.textColor || 'black'] : '';
    const bgColorClassName = this.props.bgColor ? BG_COLOR_LIST[this.props.bgColor || 'white'] : '';
    const cutClassName = this.props.cut ? 'text-cut' : '';
    const alignClassName = this.props.align ? `text-${this.props.align}` : 'text-left';
    const specialClassName = this.props.special ? SPECIAL_CLASS[this.props.special] : '';
    return <View className={`${sizeClassName} ${textColorClassName} ${bgColorClassName} ${cutClassName} ${alignClassName}`}>
        <Text className={specialClassName}>
          {this.props.text}
          {this.props.children}
        </Text>
      </View>;
  }
}
ClText.options = {
  addGlobalClass: true
};
ClText.defaultProps = {
  size: 'normal',
  textColor: undefined,
  bgColor: undefined,
  cut: false,
  align: 'left',
  special: undefined,
  text: ''
};