common_com

lazyload、calendar、react-lazyload、loading、scroll、modal、slider、input

Usage no npm install needed!

<script type="module">
  import commonCom from 'https://cdn.skypack.dev/common_com';
</script>

README

COMMON_COMPONENT

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

Table of Contents

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>
...

效果图

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>

图片懒加载效果图:

lazyLoadImg

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>
    )
}
...

modalImg

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={"-"} />
    )
}
...

calendar

属性 说明 参数 默认值
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

License

The MIT License