0.0.10 • Published 2 years ago
eco-react-image-viewer v0.0.10
eco-react-image-viewer
基于react
的图片预览组件,兼容 PC、移动端
使用
npm 或 yarn 安装
npm install eco-react-image-viewer --save
or
yarn add eco-react-image-viewer
示例
import React, { useState } from 'react';
import ImageViewer from 'eco-react-image-viewer';
import aLg from '../../fixtures/images/a-lg.png';
import aMd from '../../fixtures/images/a-md.png';
import xLg from '../../fixtures/images/x-lg.png';
import xMd from '../../fixtures/images/x-md.png';
import yLg from '../../fixtures/images/y-lg.png';
import yMd from '../../fixtures/images/y-md.png';
export default () => {
const [visible, setVisible] = useState<boolean>(false);
const [index, setIndex] = useState<number>(0);
const onClose = () => setVisible((val) => !val);
return (
<div>
<div onClick={onClose}>预览</div>
<ImageViewer
visible={visible}
urls={[aLg, aMd, xLg, xMd, yLg, yMd]}
onClose={onClose}
index={index}
onIndexChange={setIndex}
/>
</div>
);
};
API
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
urls | 图片数组 | string[] | [] |
visible | 控制显示/隐藏 | boolean | false |
onClose | 关闭预览回调 | () => void | - |
index | 当前展示图片的下标 | number | 0 |
onIndexChange | 图片切换回调 | (val: number) => void | - |