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

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

import Taro from "@tarojs/taro-h5";
import Nerv from "nervjs";
import { View } from "@tarojs/components";
import { classNames } from "../../lib/index";
import { SIZE } from "../../lib/model";
/**
 * 基础比例
 * basis-xs, basis-df, basis-lg, basis-xl
 */
export default class ClLayout extends Taro.Component {
  render() {
    const props = this.props;

    const floatClassName = () => {
      if (props.float === "left") return "fl";
      if (props.float === "right") return "fr";
      return "";
    };
    const dealDirection = direction => {
      let dr;
      switch (direction) {
        case "around":
          {
            dr = "";
            break;
          }
        case "horizontal":
          {
            dr = "-lr";
            break;
          }
        case "vertical":
          {
            dr = "-tb";
            break;
          }
        default:
          {
            dr = direction ? `-${direction}` : "";
          }
      }
      return dr;
    };
    const dealSize = size => {
      if (!size || size === "normal") return "";else return `-${SIZE[size]}`;
    };
    const paddingClassName = () => {
      const paddingDirection = props.paddingDirection;
      const size = props.padding;
      return `${(size ? "padding" : "") + dealDirection(paddingDirection) + dealSize(size)}`;
    };
    const marginClassName = () => {
      const marginDirection = props.marginDirection;
      const size = props.margin;
      return `${(size ? "margin" : "") + dealDirection(marginDirection) + dealSize(size)}`;
    };
    const normalComponent = <View className={classNames(`${floatClassName()} ${props.padding ? paddingClassName() : ""} ${props.margin ? marginClassName() : ""}`, props.className)} style={Object.assign({}, props.style)}>
      {this.props.children}
    </View>;
    return normalComponent;
  }

}
ClLayout.options = {
  addGlobalClass: true
};