mp-colorui
Version:
MP ColorUI 是一款基于 Taro 框架并且联合 Color-UI CSS 库开发的多端 UI 组件库（支持小程序端和H5端）
49 lines (47 loc) • 1.77 kB
JavaScript
import Taro from "@tarojs/taro-h5";
import Nerv from "nervjs";
import { Image, Text, View } from "@tarojs/components";
import ClIcon from "../icon/index";
import { TEXT_COLOR_LIST } from "../../lib/model";
import { classNames } from "../../lib/index";
export default class ClMenuList extends Taro.Component {
render() {
const props = this.props;
const shortLineClassName = props.shortBorder ? "sm-border" : "";
const cardClassName = props.card ? "card-menu" : "";
const list = props.list || [];
const click = index => {
props.onClick && props.onClick(index);
};
const itemComponent = list.map((item, index) => <View key={item.title} className={classNames(["cu-item", {
arrow: !!item.arrow,
disabled: item.disabled
}])} onClick={() => {
!item.disabled && click(index);
}}>
<View className={"content flex justify-between"}>
<View className="content flex align-center">
{item.icon && item.icon.iconName ? <View className="margin-right-xs flex align-center">
<ClIcon {...item.icon} />
</View> : ""}
{item.imgUrl ? <Image src={item.imgUrl} className="png margin-right-xs" mode="aspectFit" /> : ""}
<Text className={`${TEXT_COLOR_LIST[item.titleColor || "black"]}`}>
{item.title}
</Text>
</View>
<View className={"flex align-center"}>{item.value}</View>
</View>
</View>);
return <View className={classNames(`cu-list menu ${shortLineClassName} ${cardClassName}`, props.className)} style={Object.assign({}, props.style)}>
{itemComponent}
</View>;
}
}
ClMenuList.defaultProps = {
shortBorder: false,
card: false,
list: []
};
ClMenuList.options = {
addGlobalClass: true
};