图片全屏预览

使用到ahooks里面的 useFullscreen,

https://ahooks.js.org/zh-CN/hooks/use-fullscreen/#usefullscreen-demo2

直接上代码了

import { useFullscreen } from 'ahooks';
import React from 'react';
import mainImage from './img/main.png';
import { GovernmentIndustryWrap } from './style';

interface Props {}
// 可视化-政务行业 主页面
function GovernmentIndustry(props: Props) {
  const [, { enterFullscreen }] = useFullscreen(() => document.getElementById('fullscreen-img'));
  return (
    <GovernmentIndustryWrap>
      <img
        src={mainImage}
        id="fullscreen-img"
        onClick={enterFullscreen}
        alt=""
        title="点击全屏预览"
      />
    </GovernmentIndustryWrap>
  );
}
export default GovernmentIndustry;

 

posted @ 2023-04-07 14:58  行走的蒲公英  阅读(34)  评论(0编辑  收藏  举报