Easy-lightbox · Nuxt 模块

一个用于简单 Vue 3 图片灯箱组件的插件，支持缩放/拖动/旋转/切换。

Nuxt Easy Lightbox

特性

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

快速设置

使用一条命令将模块安装到您的 Nuxt 应用程序中
```
npx nuxi module add easy-lightbox
```

将模块添加到 nuxt.config.ts

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

接下来，将组件 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

nuxt-easy-lightbox

Nuxt 简单灯箱

特性

快速设置

贡献