Nuxt Easy Lightbox

一个简单的 Vue 3 图像灯箱组件插件，带有缩放 / 拖动 / 旋转 / 切换功能。

• ✨  发行说明
• 🏀 在线 Playground
• 📖  文档

特性

• 🪶  轻量级，加载速度快
• ❤️  易于使用，功能丰富
• 🖼️  灯箱中的图像滑块

快速设置

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