mp-colorui
Version:
MP ColorUI 是一款基于 Taro 框架并且联合 Color-UI CSS 库开发的多端 UI 组件库（目前仅支持小程序端）
59 lines • 1.76 kB
JavaScript
import Nerv from "nervjs";
import { View } from '@tarojs/components';
import { Component } from "@tarojs/taro-h5";
import { SIZE } from "../utils/model";
export default class ClLayout extends Component {
render() {
const floatClassName = () => {
if (this.props.float === 'left') return 'fl';
if (this.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 = this.props.paddingDirection;
const size = this.props.padding;
return `${(size ? 'padding' : '') + dealDirection(paddingDirection) + dealSize(size)}`;
};
const marginClassName = () => {
const marginDirection = this.props.marginDirection;
const size = this.props.margin;
return `${(size ? 'margin' : '') + dealDirection(marginDirection) + dealSize(size)}`;
};
const normalComponent = <View className={`${floatClassName()} ${this.props.padding ? paddingClassName() : ''} ${this.props.margin ? marginClassName() : ''}`}>
{this.props.children}
</View>;
return normalComponent;
}
}
ClLayout.options = {
addGlobalClass: true
};
ClLayout.defaultProps = {};