mp-colorui
Version:
MP ColorUI 是一款基于 Taro 框架并且联合 Color-UI CSS 库开发的多端 UI 组件库（目前仅支持小程序端）
37 lines • 1.6 kB
JavaScript
import Nerv from "nervjs";
import { View } from '@tarojs/components';
import { Component } from "@tarojs/taro-h5";
import { BG_COLOR_LIST } from "../utils/model";
export default class ClShopBar extends Component {
onClickTab(index) {
this.props.onClickTab && this.props.onClickTab(index);
}
onClickButton(index) {
this.props.onClickButton && this.props.onClickButton(index);
}
render() {
const bgColorClassName = BG_COLOR_LIST[this.props.bgColor || 'white'];
const tabsComponent = this.props.tabs && this.props.tabs.map((item, index) => <View key={index} className="action" onClick={this.onClickTab.bind(this, index)}>
<View className={`${item.icon ? 'cuIcon-' + item.icon : ''}`}>
{item.badge !== false ? <View className="cu-tag badge">{item.badge === true ? '' : item.badge}</View> : ''}
</View>
<View>{item.title}</View>
</View>);
const buttonsComponent = this.props.buttons && this.props.buttons.map((item, index) => <View key={index} className={`${BG_COLOR_LIST[item.bgColor || 'red']} submit`} onClick={this.onClickButton.bind(this, index)}>{item.text}</View>);
return <View className={`cu-bar ${bgColorClassName} tabbar shop ${this.props.border ? 'border' : ''}`} style={this.props.fix ? { position: 'fixed', bottom: '0', width: '100vw', zIndex: '10' } : ''}>
{tabsComponent}
{buttonsComponent}
</View>;
}
}
ClShopBar.options = {
addGlobalClass: true
};
ClShopBar.defaultProps = {
bgColor: 'white',
tabs: [],
buttons: [],
border: false,
onClickButton: () => {},
onClickTab: () => {}
};