COMMON_COMPONENT

React module for lazyloading images or component or scroll in your application.

Table of Contents

• Installation
• Usage
• Constructor Options
• Authors && Contributors
• License

Installation

npm

$ npm install --save-dev common_com
  or
  yarn add common_com
  or
  npm i -S common_com

Usage

main.js

import React from 'react'
import { Button, LazyLoad, LazyLoadImg, Loading, Scroll } from 'common_com'

...
render() {
    return (
        ...
        <Button onClick={() => console.log(111)} type={ 'danger' }>按钮</Button>
        <Button type={ 'default' }>按钮</Button>
        <Loading/>
        <div style={ { border: '1px solid red', marginTop: 100, marginBottom: 100 } }>
            <Scroll
                onScroll={ (type, pos) => console.log(type, pos) } # 监听滚动，type有up或者down字符串两种类型值，pos为当前滚动位置
                onPullDown={ () => console.log('下拉到底部') } # 含义如console.log所讲述
                onPullUp={ () => console.log('上拉到顶部') } # 含义如console.log所讲述
                height={ '300px' } # 注: 如果父元素设置了height，组件上可以不用传递height属性
            >
                <div className="lazy-load-img">
                    { list.map(url => {
                        return (
                            <LazyLoadImg preload={ preloadImg } key={ '自己看着办...' }> # preload在图片加载过程中所展示的默认图
                                <img height="100" r-lazy={ url } alt=""/> # r-lazy 最终要展示的图片链接, img请设置高度height
                            </LazyLoadImg>
                        );
                    }) }
                </div>
            </Scroll>
        </div>

        <div className="lazy-load-img">
          <LazyLoadImg preload={preloadImg}>
            {list.map(item => {
              return <div key={item}><img height='100px' r-lazy={item} alt=""/></div>
            })}
          </LazyLoadImg>
        </div>
        ...
    )
}
...

Button [按钮组件很简单，即使不使用本库中的我相信你也可以很快自己写好 🙂]

Input [input 框组件，有防抖功能]

• 注: Input 组件有防抖功能，使用场景：如搜索框，当用户输入关键字时发送 ajax 请求， 当输入就发起 ajax 请求，变更关键字时如果也立刻发起 ajax 请求，这样请求次数是不是 太多？此组件的设计就是为了解决类似场景遇到的问题，输入关键字或变更关键字时，不会立刻发起 ajax 请求，而是在 1s 后发起，此期间如果关键字发生变更，则重新计算

import { Input } from 'common_com'
...
<Input value={"周雪瑶”} delay={1000} onChange={this.handleChange} />
<Input delay onChange={this.handleChange} />
<Input  onChange={this.handleChange} />
...

| 属性 | 说明 | 参数 | 默认值 | | -------- | ---------------------- | ---- | --------------------------------------------------------------------------------------------------------------------- | | delay | 触发事件的延迟时长 | 无 | (number 类型) 1000 注意: 如果传递此属性，则表明此组件使用了防抖功能，默认值是 1000； 如果没有此属性，与普通输入框无异 | | onChange | 输入框内容变化时的回调 | val | | | value | 输入框内容 | 无 | (string 类型) "" |

Slider [无缝轮播图]

import { Slider } from 'common_com'
...
<Slider
    autoplay
    interval={2000}
    showArrow={true}
    delay={18}
    style={{width: '600px'}}
    className="custom-container"
>
    {list.map(item => {
    return <div key={item.id}>
        <img src={item.pic} alt="" />
    </div>;
    })}
</Slider>
...

效果图

| 属性 | 说明 | 参数 | 默认值 | | --------- | -------------------------- | ---- | ----------------------- | | autoplay | 是否自动播放 | 无 | false | | interval | 如果自动播放，时间间隔 | 无 | 3000 (注: numbner 类型) | | showArrow | 是否显示前一张后一张的箭头 | 无 | false | | className | 可以添加自定义类名 | 无 | ""(注: string 类型) | | delay | 值>=1,越小，速度越快 | 无 | 18(注: number 类型) | | style | 行内样式 | 无 | {} |

LazyLoadImg [图片懒加载组件]

<div className="lazy-load-img">
    <LazyLoadImg preload={preloadImg}>
    {list.map(item => {
        return <div key={item}><img height="100' r-lazy={item} alt=""/></div>
    })}
    </LazyLoadImg>
</div>
或者
<div className="lazy-load-img">
    { list.map(url => {
        return (
            <LazyLoadImg preload={ preloadImg } key={ url }>
                <img height="100' r-lazy={ url } alt=""/>
            </LazyLoadImg>
        );
    }) }
</div>

图片懒加载效果图:

Modal [弹窗组件]

用法:

Modal.show({}) 显示弹窗

Modal.hide() 关闭弹窗

...
handleClick = () => {
    Modal.show({
      title: "周雪瑶",
      content: <div className="custom-content">我来也...</div>,
      onCancel: Modal.hide,
      onSure: () => {
        console.log(1212);
        Modal.hide();
      }
    });
};
render() {
    return (
        <Button onClick={this.handleClick} type={"danger"}>
          按钮
        </Button>
    )
}
...

show 函数中的参数: | 属性 | 说明 | 参数 | 默认值 | | ----- | -------- | ---- | -------- | | title | 弹窗标题 | 无 | Modal | |content | 显示的主体内容 | 无 | Modal...| |onCancel | 取消按钮回调函数 | 无 | Modal.hide| |onSure | 确定按钮回调函数 | 无 | Modal.hide|

LazyLoadCom [组件懒加载]

import { LazyLoad } from "common_com";
import Loading from "../loading"; // 当然也可以使用common_com中的Loading组件
const Com = LazyLoad(() => import("../otherCom"), <Loading />);
// LazyLoad第二个参数为: 非必要参数
...
render() {
    return (
        <Com />
    )
}
...

calendar [日历组件]

import { Calendar } from "common_com";
...
selectCalendar = date => {
    console.log(date);
}
render() {
    return (
        <Calendar onChange={this.selectCalendar} date={dateString} sep={"-"} />
    )
}
...

| 属性 | 说明 | 参数 | 默认值 | | -------- | ---------------- | ---- | --------------------------------------------------------------------- | | onChange | 选择日期回调函数 | date | 无 | | date | 传入显示的日期 | 无 | string 如: 2019-08-16 或 2019-8-16 默认显示当前日期 | | sep | 分隔符 | 无 | string 如\或-等等，传入时如果也传入 date 属性，会自动格式化 date 日期 |

优化:

按需引入，上述所有组件的引用可以使用如下格式

如果在1.0.x版本中已经使用过此引入方式，则在更新到1.1.x版本及之后，只需要将common_com/lib/组件名中的组件名改为驼峰命名即可；如common_com/lib/button改为common_com/lib/Button
common_com/lib/lazy-load-img改为common_com/lib/LazyLoadImg

import Button from "common_com/lib/Button";

import Loading from "common_com/lib/Loading"

import Calendar from "common_com/lib/Calendar";

Authors && Contributors

• suyangzhou

License

The MIT License