mp-colorui
Version:
MP ColorUI 是一款基于 Taro 框架并且联合 Color-UI CSS 库开发的多端 UI 组件库(支持小程序端和H5端)
30 lines (28 loc) • 1.32 kB
JavaScript
import Nerv from "nervjs";
import { Switch, View } from "@tarojs/components";
import Taro from "@tarojs/taro-h5";
import { classNames } from "../../lib/index";
import ClSwitch_h5 from "./h5/index";
export default class ClSwitch extends Taro.Component {
render() {
const props = this.props;
const title = props.title;
const color = props.color || "green";
const shapeClassName = props.shape !== "radius" ? "" : "radius";
const type = props.type === "form" ? "form" : "normal";
const checked = !!props.checked;
const hasChecked = checked ? "checked" : "";
const onChange = e => {
props.onChange && props.onChange(e.detail.value);
};
const switchComponent = <Switch className={classNames(`${color} ${hasChecked} ${shapeClassName} sm`, props.className)} style={Object.assign({}, props.style)} checked={checked} onChange={onChange} disabled={props.disabled} />;
const formSwitchComponent = <View className={classNames("cu-form-group", props.className)} style={Object.assign({}, props.style)}>
<View className="title">{title}</View>
{switchComponent}
</View>;
return Taro.getEnv() === Taro.ENV_TYPE.WEB ? <ClSwitch_h5 {...this.props} /> : type === "form" ? formSwitchComponent : switchComponent;
}
}
ClSwitch.options = {
addGlobalClass: true
};