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

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

import Nerv from "nervjs";
import { Button, Text, View } from '@tarojs/components';
import { Component } from "@tarojs/taro-h5";
import { BG_COLOR_LIST, SIZE } from "../utils/model";
export default class ClButton extends Component {
  onClick(e) {
    this.props.onClick && this.props.onClick(e);
  }
  onOpenSetting(e) {
    this.props.onOpenSetting && this.props.onOpenSetting(e);
  }
  onGetUserInfo(e) {
    this.props.onGetUserInfo && this.props.onGetUserInfo(e);
  }
  onContact(e) {
    this.props.onContact && this.props.onContact(e);
  }
  onGetPhoneNumber(e) {
    this.props.onGetPhoneNumber && this.props.onGetPhoneNumber(e);
  }
  onError(e) {
    this.props.onError && this.props.onError(e);
  }
  render() {
    const shapeClassName = this.props.shape || 'radius';
    const sizeClassName = this.props.size || 'normal';
    const colorClassName = this.props.bgColor || 'blue';
    const disabledClassName = this.props.disabled;
    const loadingClassName = this.props.loading ? 'cuIcon-loading iconfont-spin' : '';
    const plainClassName = this.props.plain;
    const plainSizeName = this.props.plainSize === 'default' ? 'line' : 'lines';
    const shadowSizeName = this.props.shadow ? 'shadow' : '';
    const buttonClassName = `cu-btn ${shapeClassName} ${SIZE[sizeClassName]} ${plainClassName ? '' : BG_COLOR_LIST[colorClassName]} ${plainClassName ? plainSizeName + '-' + colorClassName : ''} ${shadowSizeName}`;
    const normalButton = <Button className={buttonClassName} disabled={disabledClassName} onClick={this.onClick.bind(this)} openType={this.props.openType} onOpenSetting={this.onOpenSetting} onGetUserInfo={this.onGetUserInfo} onContact={this.onContact} onGetPhoneNumber={this.onGetPhoneNumber} onError={this.onError}>
        <Text className={loadingClassName} />
        <Text>{this.props.text}</Text>
        {this.props.children}
      </Button>;
    const longButton = <View className="flex flex-direction">{normalButton}</View>;
    return this.props.long ? longButton : normalButton;
  }
}
ClButton.options = {
  addGlobalClass: true
};
ClButton.defaultProps = {
  shape: 'radius',
  size: 'normal',
  bgColor: 'blue',
  disabled: false,
  loading: false,
  long: false,
  plain: false,
  plainSize: 'default',
  shadow: true,
  openType: undefined
};