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

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

import Taro from "@tarojs/taro-h5";
import Nerv from "nervjs";
import { Checkbox, CheckboxGroup, Text, View } from "@tarojs/components";
import ClCheckboxH5 from "./h5/index";
import { classNames, isWeApp } from "../../lib/index";
export default class ClCheckbox extends Taro.Component {
  render() {
    const props = this.props;

    const colorClassName = props.color || "green";
    const type = props.type === "form" ? "form" : "";
    const shapeClassName = props.shape === "round" ? "round" : "";
    const directionClassName = props.direction === "horizontal" ? "flex" : "";
    const list = props.checkboxGroup ? props.checkboxGroup : [];
    const title = props.title;
    const checkboxComponent = list.map(item => <View className="padding-xs" key={item.value}>
      {item.key ? <Text className="padding-right-sm">{item.key}</Text> : ""}
      <Checkbox className={classNames([colorClassName, shapeClassName, {
        more: props.more
      }])} value={item.value || ""} checked={item.checked} disabled={item.disabled} />
    </View>);
    const formComponent = <View className="cu-form-group">
      <View className="title">{title}</View>
      <View className={directionClassName}>{checkboxComponent}</View>
    </View>;
    const change = e => {
      props.onChange && props.onChange(e.detail.value);
    };
    const component = !isWeApp ? <ClCheckboxH5 {...props} /> : <CheckboxGroup className={`${type === "form" ? "block" : ""}`} onChange={change}>
      {type === "form" ? formComponent : <View className={directionClassName}>{checkboxComponent}</View>}
    </CheckboxGroup>;
    return <View className={classNames(props.className)} style={Object.assign({}, props.style)}>
      {component}
    </View>;
  }

}
ClCheckbox.options = {
  addGlobalClass: true
};