Nuxt Easy Lightbox

一個簡單的 Vue 3 圖片燈箱元件外掛，具備縮放 / 拖曳 / 旋轉 / 切換功能。

• ✨  版本說明
• 🏀 線上體驗場
• 📖  文件

功能

• 🪶  輕量、快速載入
• ❤️  易於使用且功能豐富
• 🖼️  燈箱中的圖片滑塊

快速設定

1. 使用一個指令將模組安裝到您的 Nuxt 應用程式

   npx nuxi module add easy-lightbox
   

2. 將模組新增至 nuxt.config.ts

   export default defineNuxtConfig({
     modules: ['nuxt-easy-lightbox'],
   })
   

3. 接著在您想要使用燈箱的圖片元素旁邊使用 VueEasyLightbox 元件。

   <template>
     <div>
       <div
         v-for="(src, index) in imgs"
         :key="index"
         class="pic"
         @click="() => showImg(index)"
       >
         <img :src="src" />
       </div>
       <VueEasyLightbox
         :visible="visibleRef"
         :imgs="imgs"
         :index="indexRef"
         @hide="onHide"
       />
     </div>
   </template>
   
   <script setup>
   const visibleRef = ref(false);
   const indexRef = ref(0);
   
   const imgs = [
     "https://via.placeholder.com/450.png/",
     "https://via.placeholder.com/300.png/",
     "https://via.placeholder.com/150.png/",
     { src: "https://via.placeholder.com/450.png/", title: "this is title" },
   ];
   
   const showImg = (index) => {
     indexRef.value = index;
     visibleRef.value = true;
   };
   const onHide = () => (visibleRef.value = false);
   </script>
   

請注意

• 對於圖片群組，您只需要一個 VueEasyLightbox，因為它們可以透過滑塊瀏覽。將所有圖片放入陣列並傳遞給 imgs 參數。
• 對於個別圖片，每個 img 元素都需要個別的燈箱。

就這樣！您現在可以在您的 Nuxt 應用程式中使用 Easy Lightbox 了 ✨

貢獻

# Install dependencies
pnpm install

# Generate type stubs
pnpm dev:prepare

# Develop with the playground
pnpm dev

# Build the playground
pnpm dev:build

# Run ESLint
pnpm lint

# Run Vitest
pnpm test
pnpm test:watch

# Release new version
npm run release