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

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

import Nerv from "nervjs";
import { Block, Text, View } from '@tarojs/components';
import { Component } from "@tarojs/taro-h5";
import { BG_COLOR_LIST, TEXT_COLOR_LIST } from "../utils/model";
export default class ClNavBar extends Component {
  onClickLeftIcon(index) {
    this.props.onClickLeftIcon && this.props.onClickLeftIcon(index);
  }

  onClickRightIcon(index) {
    this.props.onClickRightIcon && this.props.onClickRightIcon(index);
  }

  render() {
    const bgColorClassName = this.props.bgColor ? BG_COLOR_LIST[this.props.bgColor] : 'bg-white';
    const leftComponent = this.props.leftIcon && this.props.leftIcon.map((item, index) => <Block key={index}>
        <Text className={`${item.icon ? 'cuIcon-' + item.icon : ''} ${item.color ? TEXT_COLOR_LIST[item.color] : ''}`} onClick={this.onClickLeftIcon.bind(this, index)} />
        <Text className={`${item.color ? TEXT_COLOR_LIST[item.color] : ''}`} onClick={this.onClickLeftIcon.bind(this, index)}>{item.text}</Text>
      </Block>);
    const rightComponent = this.props.rightIcon && this.props.rightIcon.map((item, index) => <Block key={index}>
        <Text className={`${item.icon ? 'cuIcon-' + item.icon : ''} ${item.color ? TEXT_COLOR_LIST[item.color] : ''}`} onClick={this.onClickRightIcon.bind(this, index)} />
      </Block>);
    return <View className={`cu-bar ${bgColorClassName}`}>
        <View className="action">{leftComponent}</View>
        <View className="content text-bold">{this.props.title}</View>
        <View className="action">{rightComponent}</View>
      </View>;
  }
}
ClNavBar.options = {
  addGlobalClass: true
};
ClNavBar.defaultProps = {
  title: '',
  leftIcon: [],
  rightIcon: [],
  bgColor: "white"
};