img preview

@aligov/components-img-preview

for img preview component,图片预览功能,采用hooks的写法,兼容ie。使用方法见demo

API

参数名 说明 必填 类型 默认值 备注

DEMO 列表

Simple Usage

本 Demo 演示一行文字的用法。

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import useImgPreviewHooks from '@aligov/components-img-preview';
const url = "https://img.alicdn.com/tfs/TB1fZnqfKH2gK0jSZFEXXcqMpXa-104-95.jpg";

function App(props) {
  const { ImgPreview, showImg } = useImgPreviewHooks();
  return (
      <div>
        <img src={url} onClick={()=> {
          return showImg(url);
        }}/>
        <ImgPreview >
          <div>
            <button> 操作区域 </button>
          </div>
        </ ImgPreview>
      </div>
    );
}

ReactDOM.render((
  <App />
), mountNode);