包说明

维护人： 刘畅

此包提供了一些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>