@charyliu/pack-react

包说明

维护人： 刘畅

此包提供了一些react组件：

• Popup（弹窗组件）
• Carousel（轮播组件）
• HoleMask（造洞蒙层组件）
• ProgressBar（进度条组件）
• FlyAni（飞行动画组件）

演示地址：xxx

Install

npm install @charyliu/pack-react

Usage

import {
  Popup, showPop, hidePop,
  Carousel,
  HoleMask,
  ProgressBar,
  FlyAni
} from '@charyliu/pack-react'

Popup组件详情

Popup.props

属性	类型	必填	默认	描述
isCenter	boolean	false	true	弹窗是否居中显示
maskOpacity	number	false	0.7	弹窗蒙层（黑色）透明度
clickMaskHide	boolean	false	false	点击弹窗蒙层关闭弹窗
maskClickThrough	boolean	false	false	弹窗蒙层是否点击穿透
contentClassName	string	false	''	弹窗内容样式类名

showPop

/** 弹窗配置 */
interface PopOptions {
    /** 弹窗层级（打开高层级弹窗将自动隐藏低层级弹窗，关闭高层级弹窗后低层级弹窗将自动显示），默认0 */
    zIndex?: number;
    /** 弹窗是否居中显示，默认true */
    isCenter?: boolean;
    /** 弹窗蒙层（黑色）透明度, 默认0.7 */
    maskOpacity?: number;
    /** 点击弹窗蒙层关闭弹窗，默认false */
    clickMaskHide?: boolean;
    /** 点击弹窗蒙层回调 */
    onClickMask?: Function;
    /** 弹窗蒙层是否点击穿透, 默认false */
    maskClickThrough?: boolean;
    /** 弹窗内容样式类名 */
    contentClassName?: string;
    /** 自定义传入参数，会注入到弹出组件的props */
    [keyName: string]: any;
}
/**
 * 展示弹窗
 * @param popComp 弹窗组件
 * @param options 弹窗配置
 * @returns 弹窗id
 */
declare const showPop: (popComp: React.ComponentClass | React.FunctionComponent, options?: PopOptions) => string;

hidePop

/**
 * 隐藏弹窗
 * @param options 弹窗关闭配置
 */
declare function hidePop(options?: {
    /** 关闭全部 */
    isHideAll?: boolean;
    /** 要隐藏的弹窗的id，未传默认隐藏最上层弹窗 */
    id?: string;
    /** 弹窗内容样式类名 */
    contentClassName?: string;
    /** 延迟关闭弹窗的时间（ms），默认0 */
    delay?: number;
}): void;

使用示范

/* app.jsx */
import { Popup } from '@charyliu/react-popup'
import Index from 'index.jsx'
function APP() {
    return (
        <>
            <Popup />
            <Index />
        </>
    )
}

/* index.jsx */
import { showPop, hidePop } from '@charyliu/react-popup'
import Rank from 'rank.jsx'
// 打开排行榜弹窗
const popId = showPop(Rank); 
// 隐藏排行榜弹窗
hidePop(); 

Carousel（轮播组件）

Props

属性	类型	必填	默认	描述
children	React.ReactNode[]	true	无	子节点（所有轮播项）
className	string	false	{overflow: hidden;}	可视区className
style	object	false	{}	可视区style
itemNum	number	false	1	可视轮播项个数
direction	'X'|'Y'|'Z'	false	'X'	轮播滚动轴向
unit	string	false	'px'	css尺寸单位（如px、rem等）
speed	number	false	-100	轮播速度（unit/s），负则向direction轴负方向滚动，正则向direction轴正方向滚动
stepDistance	number	false	100	轮播单步距离（unit）
stepInterval	number	false	0	轮播单步间隔时间(ms)，为0则是连续不断的滚动
onEveryStep	(step: 1 | -1) => void	false	null	滚动单步回调
autoScroll	boolean	false	true	是否自动滚动
canTouchScroll	boolean	false	false	是否支持手动滑动

使用示范

const Imgs = [
    './item1.png',
    './item2.png',
    './item3.png',
]；
<Carousel className="carousel_view" itemNum={1} speed={-100} stepDistance={200} stepInterval={2000} >
    {Imgs.map((v, i) => {
        return <img key={i} className='carousel_item' src={v}></img>
    })}
</Carousel>

HoleMask（造洞蒙层组件）

Props

属性	类型	必填	默认	描述
className	string	false	{width: 300px; height: 300px; position: relative; background-color: rgba(0,0,0,0.7);}	蒙层className
style	object	false	{}	蒙层style
circleHoles	{ x: number, y: number, diameter: number }[]	false	[]	圆洞配置
rectHoles	{ x: number, y: number, width: number, height: number }[]	false	[]	方洞配置
roundRectHoles	{ x: number, y: number, width: number, height: number, radius: number }[]	false	[]	圆角矩形洞配置

使用示范

<HoleMask 
    circleHoles={[{diameter: 100, x: 150, y: 150]}}
    rectHoles={[{x: 50, y: 50, width: 50, height: 50}]}
    roundRectHoles={[{x: 300, y: 300, width: 200, height: 100, radius: 40}]}
    maskClass="mask" 
/>

ProgressBar（进度条组件）

Props

属性	类型	必填	默认	描述
children	React.ReactNode	true	无	子节点-滚动条
className	string	false	{width: 300px; height: 50px; position: relative; overflow: hidden;}	可视区className
style	object	false	{}	可视区style
onReady	(runBar: RunBar) => void	true	无	准备完毕回调

// runBar方法说明
interface RunBar {
    /**
     * 跑滚动条
     * @param aimPercentage 目标百分进度（0-100）
     * @param easeTime 缓动时间，毫秒，默认0
     * @param onProgress 进度回调
     * @returns {() => void} 返回停止进度条缓动的方法
     */
    (aimPercentage: number, easeTime?: number, onProgress?: (progress: number) => void): () => void
}

使用示范

// 1500ms将进度条跑满（100）
<ProgressBar onReady={runBar => runBar(100, 1500)} className="progressBar_view" >
    <img className='bar' src={'./bar.png'}></img>
</ProgressBar>

FlyAni（飞行动画组件）

Props

属性	类型	必填	默认	描述
children	React.ReactNode	true	无	子节点-飞行元素
itemNum	number	false	4	飞行元素总数（对象池大小）
onReady	(goFly: GoFly) => void	true	无	准备完毕回调

// goFly方法说明
interface GoFly {
  /**
   * 飞行动画
   * @param startTransform 起始transform属性
   * @param endTransform 结束transform属性
   * @param flyNum 飞行元素个数，默认4个
   * @param flyTime 单元素飞行时间，默认500ms
   * @param flyInterval 元素之间飞行间隔，默认200ms
   * @returns 返回飞行动画总时间ms
   */
  (startTransform: string, endTransform: string, flyNum?: number, flyTime?: number, flyInterval?: number): number;
}

使用示范

// 金币从(0, 0)飞到(200, 200)
<FlyAni onReady={goFly=> goFly('translate(0, 0)','translate(200px, 200px)')} >
    <img src={'./coin.png'} />
</FlyAni>