【antd-pro】轮播图片预览多功能组件

预览效果：
https://hyk51594176.github.io/rc-viewer/

image.png

主要使用两个插件：

• 1：react-slick 轮播插件 react-slick

npm install react-slick

• 2：rc-viewer 图片预览插件，（如果点击单图预览多图，需要包裹图片数组，然后css设置隐藏） rc-viewer

npm install @hanyk/rc-viewer

• 3：写一个自定义组件CarouselImg，使用以上两个插件。

import React from 'react';
import { Checkbox } from 'antd';
import Slider from 'react-slick';
import type { carouselList } from '@/services/data.d';
import { LeftOutlined, RightOutlined } from '@ant-design/icons';
import { useState, useRef } from 'react';
import RcViewer from '@hanyk/rc-viewer';

type CarouselProps = {
  carousels?: carouselList[];
};

const CarouselImg: React.FC<CarouselProps> = (prop) => {
  const { carousels = [], onSelectedImg } = prop;
  const defaultImg: string =
    carousels.length > 4 ? carousels[1].url : carousels[0] && carousels[0].url;
  const [curImg, setSetImg] = useState<string>(defaultImg);
  const getImgDom = useRef<any | null>();

  const previewImg = (index: number, i: carouselList) => {
    setSetImg(i.url);
  };

  const SlickArrowLeft = ({ currentSlide, slideCount, ...props }: any) => (
    <button
      {...props}
      className={`slick-prev ${currentSlide === 0 ? ' slick-disabled' : ''}`}
      aria-hidden="true"
      aria-disabled={currentSlide === 0}
      type="button"
    >
      <LeftOutlined />
    </button>
  );
  const SlickArrowRight = ({ currentSlide, slideCount, ...props }: any) => (
    <button
      {...props}
      className={`slick-next ${currentSlide === slideCount - 1 ? ' slick-disabled' : ''}`}
      aria-hidden="true"
      aria-disabled={currentSlide === slideCount - 1}
      type="button"
    >
      <RightOutlined />
    </button>
  );

  const settings = {
    infinite: true,
    slidesToShow: carousels.length < 5 ? carousels.length : 3,
    slidesToScroll: 1,
    swipeToSlide: false,
    touchMove: false,
    className: styles.slidesBox,
    speed: 500,
    prevArrow: <SlickArrowLeft />,
    nextArrow: <SlickArrowRight />,
    draggable: false,
     afterChange: (e1: any) => {
      console.log('afterChange:', e1);
     },
     beforeChange: (e2: any) => {
      console.log('before:', e2);
     },
  };
  const options = {
  }
  return (
    <div className={styles.container}>
      <div className={styles.bigImgMask}>
        <img src={curImg} className={styles.bigImg} id="previewImage" />
        <div className={styles['hide-box']}>
          <RcViewer ref={getImgDom} options={options} className={styles['rcviewer-box']}>
            {carousels &&
              carousels.map((i: carouselList) => (
                  <img 
                  src={i.url} 
                  className={`${styles['hide-img']} ${
                    i.url === curImg ? `${styles['pre-img']}` : ''
                  }`}
                  key={i.id}/>
              ))}
          </RcViewer>
        </div>
      </div>
      <div className={styles.bottomSlider}>
        <Checkbox.Group style={{ width: '100%' }} onChange={onSelectedImg}>
          <Slider
            {...settings}
            style={{
              display: 'flex',
              justifyContent: 'center',
              alignItems: 'center',
              width: '400px',
              height: '120px',
            }}
          >
            {carousels &&
              carousels.map((i: carouselList, id: number) => (
                <div
                  className={`${styles['inner-box']} ${
                    i.url === curImg ? `${styles['inner-active']}` : ''
                  }`}
                  key={i.url}
                  onClick={() => {
                    previewImg(id, i);
                  }}
                >
                  <img src={i.url} className={styles['inner-img']} />
                  <div className={styles['inner-tips']}>
                    <Checkbox className={styles.checkbox} value={i.id} />
                    <span className={styles.tips}>
                      {i.status}
                      {i.id}
                    </span>
                  </div>
                </div>
              ))}
          </Slider>
        </Checkbox.Group>
      </div>
    </div>
  );
};

export default CarouselImg;

• 4 调用自定义组件CarouselImg传入图片list数组

  <div>
    <CarouselImg carousels={carousels} />
  </div>