图片预览

@beisen-phoenix/img-preview

简介

以全屏的形式预览图片

API

参数	说明	类型	默认值	是否必传	备注
files	预览文件列表	IfileItem[]	[]	是	-
defaultSelected	设置默认选中的图片	number	0	否	-
download	控制是否显示下载按钮	boolean	true	否	-
showMask	控制是否显示遮罩层	boolean	true	否	-
showButtonName	是否显示按钮名字,为false时会展示tooltip	boolean	true	否	当传入的lang属性为‘en_US’英文是，该属性值为false
buttonName	按钮名字配置	object		否	-
zIndex	zIndex	number	number	10	否
onClose	点击关闭按钮的回调	function	()=>{}	是	-
onDownload	点击下载按钮的回调	function	(IFileItem)=>{}	否	-
lang	当前语言环境(zh_CN,en_US,zh_TW)	string	zh_CN	否	-
translation	国际化，详情见下方	object	-	否	-
extraCls	弹层的额外样式	string	-	否	-

相关说明

数据格式

interface IFileItem {
  // 文件名称
  fileName: string;
  // 文件地址
  previewUrl: string;
  // 文件标识
  id: string;
}

示例代码

const files: IFileItem[] = [
  {
    fileName: '漂亮小姐姐',
    id: '123',
    previewUrl:
      'https://dfiles.tita.com/Portal/110006/4539b8ba767f4d77be26f822801b4dc9.jpg'
  },
  {
    fileName: '非常漂亮的小姐姐',
    id: '1234',
    previewUrl:
      'https://dfiles.tita.com/Portal/110006/f18f7dd660ef482e9cb31aeb02b9e674.jpg'
  },
  {
    fileName: '帅哥帅哥',
    id: 'handsometwo',
    previewUrl:
      'https://dfiles.tita.com/Portal/110006/dcb836403aa7409da9d6f315eedd4220.png'
  }
];

export default function Preivew() {
  const [show, setShow] = useState(false);
  const handleClick = () => {
    setShow(!show);
  };
  const handleClose = () => {
    setShow(false);
  };
  const handleDownload = (file: any) => {};
  return (
    <div>
      <button onClick={handleClick}>显示隐藏</button>
      {show && (
        <ImgPreview
          files={files}
          onClose={handleClose}
          onDownload={handleDownload}
        />
      )}
    </div>
  );
}

translation

translation: {
  rotate: "旋转",
  showOriginSize: "查看原图",
  showFitSize: "适应屏幕",
  download: "下载"
}