vue3 项目使用 FancyApp 轮播图组件封装

1. 下载 @fancyapps/ui

   npm install @fancyapps/ui -S
   

2. 新建组件src/components/FancyApp.vue, 文件代码如下：

   <template>
     <div class="fancy-app">
       <div :id="mainId" class="main-carousel carousel w-10/12 max-w-5xl mx-auto">
         <div
           class="carousel__slide"
           v-for="item in gallery"
           :key="item.id || item.uid"
           :data-src="item.src"
           :data-fancybox="dataFancyBox"
           :data-caption="item.caption"
         >
           <img :src="item.src" />
         </div>
       </div>
   
       <div :id="ThumbId" class="thumb-carousel carousel max-w-xl mx-auto">
         <div
           class="carousel__slide"
           v-for="item in gallery"
           :key="item.id || item.uid"
         >
           <img class="panzoom__content" :src="item.src" />
         </div>
       </div>
     </div>
   </template>
   
   <script>
   import { Fancybox, Carousel } from "@fancyapps/ui";
   import "@fancyapps/ui/dist/fancybox.css";
   
   export default {
     name: "fancy-app",
     props: {
       gallery: {
         type: Array,
         required: true,
       },
       dataFancyBox: {
         type: String,
         default: "gallery",
       },
     },
     setup() {
       let guid = () => {
         function S4() {
           return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
         }
         return (
           S4() +
           S4() +
           "-" +
           S4() +
           "-" +
           S4() +
           "-" +
           S4() +
           "-" +
           S4() +
           S4() +
           S4()
         );
       };
       return {
         mainId: "mainCarousel",
         guid,
       };
     },
   
     beforeMount() {
       let that = this;
       let guid = that.guid();
       let mainIdStr = "mainCarousel";
       let ThumbIdStr = "thumbCarousel";
       that.mainId = mainIdStr + guid;
       that.ThumbId = ThumbIdStr + guid;
     },
   
     mounted() {
       let that = this;
       // Initialise Carousel
       const mainCarousel = new Carousel(
         document.querySelector("#" + that.mainId),
         {
           Dots: false,
         }
       );
       // Thumbnails
       new Carousel(document.querySelector("#" + that.ThumbId), {
         Sync: {
           target: mainCarousel,
           friction: 0,
         },
         Dots: false,
         Navigation: false,
         center: true,
         slidesPerPage: 1,
         infinite: false,
       });
   
       // Customize Fancybox
       Fancybox.bind(`[data-fancybox=${that.dataFancyBox}]`, {
         Carousel: {
           on: {
             change: (that) => {
               mainCarousel.slideTo(mainCarousel.findPageForSlide(that.page), {
                 friction: 0,
               });
             },
           },
         },
       });
     },
   
     methods: {},
   };
   </script>
   
   <style>
   .main-carousel {
     width: 600px;
     margin: 0 auto 1rem auto;
   
     --carousel-button-color: #170724;
     --carousel-button-bg: #fff;
     --carousel-button-shadow: 0 2px 1px -1px rgb(0 0 0 / 20%),
       0 1px 1px 0 rgb(0 0 0 / 14%), 0 1px 3px 0 rgb(0 0 0 / 12%);
   
     --carousel-button-svg-width: 20px;
     --carousel-button-svg-height: 20px;
     --carousel-button-svg-stroke-width: 2.5;
   }
   
   .main-carousel .carousel__slide {
     width: 100%;
     padding: 0;
   }
   
   .main-carousel .carousel__button.is-prev {
     left: -1.5rem;
   }
   
   .main-carousel .carousel__button.is-next {
     right: -1.5rem;
   }
   
   .main-carousel .carousel__button:focus {
     outline: none;
     box-shadow: 0 0 0 4px #a78bfa;
   }
   
   .thumb-carousel .carousel__slide {
     opacity: 0.5;
     padding: 0;
     margin: 0.25rem;
     width: 96px;
     height: 64px;
   }
   
   .thumb-carousel .carousel__slide img {
     width: 100%;
     height: calc(100% - 4px);
     object-fit: cover;
     border-radius: 4px;
   }
   
   .thumb-carousel .carousel__slide.is-nav-selected {
     opacity: 1;
   }
   </style>
   

3. 在另一个页面中，引入组件示例：

   <template>
     <div class="fancy-app-test">
       <FancyApp :gallery="gallery" :dataFancyBox="dataFancyBox"></FancyApp>
     </div>
   </template>
   
   <script>
   import FancyApp from "@/components/FancyApp.vue";
   
   export default {
     setup() {
       return {
           // 图片数据格式：
         gallery: [
           {
             src: "https://lipsum.app/id/2/800x600",
             thumb: "https://lipsum.app/id/2/80x80",
             caption: "First image",
           },
           {
             src: "https://lipsum.app/id/3/800x600",
             thumb: "https://lipsum.app/id/3/80x80",
             caption: "Second image",
           },
           {
             src: "https://lipsum.app/id/4/800x600",
             thumb: "https://lipsum.app/id/4/80x80",
             caption: "Third image",
           },
         ],
           
           // 这个可不填
         dataFancyBox: "gallery",
       };
     },
     components: {
       FancyApp,
     },
   };
   </script>
   

4. 搞定啦！