easy-react-lib

简介

这是一个方便易用的简融内部react组件库（移动端），可以按需使用自己需要的组件

安装

npm install easy-react-lib --save

组件

import { LoadView, Loading } from 'easy-react-lib';

按需加载的正确姿势：

import Loading  from './src/Loading';

webpack配置(勿直接复制)：

const ERB = path.resolve(__dirname,'node_modules/_easy-react-lib');
rules:[
    {
        test: /\.js$/,
        include: [..., ERB],
        use: ['babel-loader']
    }, {
        test: /\.jsx$/,
        include: [..., ERB],
        use: ['babel-loader']
    }
       ...]

不去配置webpack的方案：直接在路径上加入对应的loader

import { LoadView, Loading } from 'babel-loader!easy-react-lib';

组件列表

    <LoadView /> //加载动画
    
    <Loading msg='加载中'/> //加载提示语
    
    ...后续不断补充

样式

jrMobile.less是所需的样式变量，使用方式例如：

@import "~easy-react-lib/src/jrMobile.less";

.login {
  .mobile {
    color: @c-blaze;
  }
}

样式的命名规则：

@c-blaze: #ff5808; @s-tx-x: 0.9rem;

第一个字母代表color/size 第二个字符串代表语义

    aid(辅助) bk(背景) tx(文字) blaze(强调) fill(填充)

第三个字符串代表值

    比如说
    @c-tx-x: #333;
    文字x代表深颜色 #333 每多加一个值递减颜色 (借鉴markdown的思路)
    @s-tx-x: 0.9rem;
    这种情况 没多加一个值递减字号

全部内容

    /*主色调*/
    @c-blaze: #ff5808;  /*强调突出*/
    @c-fill: #ff712d;
    /*辅助色调*/
    @c-aid-blaze: #15a2e6;
    @c-aid-taggreen: #77ba15;
    @c-aid-tagred: #ff0808;
    @c-aid-info: #f18d00; /*辅助颜色*/
    /*文字颜色*/
    @c-tx-x: #333;
    @c-tx-xx: #666;
    @c-tx-xxx: #999;
    @c-tx-xxxx: #b0b0b0;
    @c-tx-w: #fff;
    /*背景色*/
    @c-bk-x: #ff5f13;
    @c-bk-xx: #ff9f25;
    @c-bk-g: #f2f2f2;
    @c-bk-w: #fff;
    /*线值*/
    @c-line-m: #eee;
    /*字号*/
    @s-tx-x: 0.9rem;
    @s-tx-xx: 0.8rem;
    @s-tx-xxx: 0.7rem;
    @s-tx-xxxx: 0.6rem;
    
    注意：要结合语义使用，
     @c-tx-w: #fff;  @c-bk-w: #fff;
     
    都是白色，但是使用一定要分场景使用对应的，便于之后的维护和替换

    后续会持续更新维护，甚至有可能产生多套

GITLAB

http://120.27.188.111/zhaoyuenan/easy-react-lib