common_com
v1.2.7
lazyload、calendar、react-lazyload、loading、scroll、modal、slider、input
0/weekUpdated 3 years agoMITUnpacked: 61.6 KB
Published by suyangzhou
npm install common_comCOMMON_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
``bash`
$ 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 (
...
onPullDown={ () => console.log('下拉到底部') } # 含义如console.log所讲述
onPullUp={ () => console.log('上拉到顶部') } # 含义如console.log所讲述
height={ '300px' } # 注: 如果父元素设置了height，组件上可以不用传递height属性
>
{ list.map(url => {
return (
);
}) }
{list.map(item => {
return
})}
...
)
}
...
`
Button [按钮组件很简单，即使不使用本库中的我相信你也可以很快自己写好 🙂]
Input [input 框组件，有防抖功能]
- 注: Input 组件有防抖功能，使用场景：如搜索框，当用户输入关键字时发送 ajax 请求，
当输入就发起 ajax 请求，变更关键字时如果也立刻发起 ajax 请求，这样请求次数是不是
太多？此组件的设计就是为了解决类似场景遇到的问题，输入关键字或变更关键字时，不会立刻发起 ajax 请求，而是在 1s 后发起，此期间如果关键字发生变更，则重新计算
import { Input } from 'common_com'
...
...
| 属性 | 说明 | 参数 | 默认值 |
| -------- | ---------------------- | ---- | --------------------------------------------------------------------------------------------------------------------- |
| delay | 触发事件的延迟时长 | 无 | (number 类型) 1000 注意: 如果传递此属性，则表明此组件使用了防抖功能，默认值是 1000； 如果没有此属性，与普通输入框无异 |
| onChange | 输入框内容变化时的回调 | val | |
| value | 输入框内容 | 无 | (string 类型) "" |
Slider [无缝轮播图]
import { Slider } from 'common_com'
...
interval={2000}
showArrow={true}
delay={18}
style={{width: '600px'}}
className="custom-container"
>
{list.map(item => {
return
;
})}
...
效果图
| 属性 | 说明 | 参数 | 默认值 |
| --------- | -------------------------- | ---- | ----------------------- |
| autoplay | 是否自动播放 | 无 | false |
| interval | 如果自动播放，时间间隔 | 无 | 3000 (注: numbner 类型) |
| showArrow | 是否显示前一张后一张的箭头 | 无 | false |
| className | 可以添加自定义类名 | 无 | ""(注: string 类型) |
| delay | 值>=1,越小，速度越快 | 无 | 18(注: number 类型) |
| style | 行内样式 | 无 | {} |
LazyLoadImg [图片懒加载组件]
{list.map(item => {
return ![]()
})}
或者
{ list.map(url => {
return (
![]()
);
}) }
图片懒加载效果图:
Modal [弹窗组件]
用法:
Modal.show({}) 显示弹窗
Modal.hide() 关闭弹窗
...
handleClick = () => {
Modal.show({
title: "周雪瑶",
content: 我来也...,
onCancel: Modal.hide,
onSure: () => {
console.log(1212);
Modal.hide();
}
});
};
render() {
return (
)
}
...
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"),
// LazyLoad第二个参数为: 非必要参数
...
render() {
return (
)
}
...
calendar [日历组件]
import { Calendar } from "common_com";
...
selectCalendar = date => {
console.log(date);
}
render() {
return (
)
}
...
| 属性 | 说明 | 参数 | 默认值 |
| -------- | ---------------- | ---- | --------------------------------------------------------------------- |
| 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";