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

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

import Taro from "@tarojs/taro-h5";
import Nerv from "nervjs";
import { Radio, RadioGroup, Text, View } from '@tarojs/components';
export default class ClRadio extends Taro.Component {
  render() {
    const props = this.props;

    const type = props.type === 'form' ? 'form' : 'normal';
    const shapeClassName = props.shape === 'radio' ? 'radio' : 'normal';
    const title = props.title ? props.title : '';
    const colorClassName = props.color ? props.color : 'green';
    const directionClassName = props.direction === 'horizontal' ? 'flex' : '';
    const list = props.radioGroup ? props.radioGroup : [];
    const changeRadio = e => {
      props.onChange && props.onChange(e.detail.value);
    };
    const radioComponent = list.map((item, index) => <View className="padding-xs" key={item.value}>
      <Text className="padding-right-sm">{item.key}</Text>
      <Radio className={`${colorClassName} ${shapeClassName}`} checked={item.value === props.checkedValue} value={item.value || ''} />
    </View>);
    const formRadioComponent = <View className="cu-form-group">
      <View className="title">{title}</View>
      <View className={directionClassName}>{radioComponent}</View>
    </View>;
    return <RadioGroup onChange={changeRadio} className={`${props.type === 'form' ? 'block' : ''}`}>
      {type === 'form' ? formRadioComponent : <View className={directionClassName}>{radioComponent}</View>}
    </RadioGroup>;
  }

}
ClRadio.options = {
  addGlobalClass: true
};