Nuxt Easy Lightbox

ズーム/ドラッグ/回転/切り替え機能を備えたシンプルなVue 3 Image Lightboxコンポーネント用のプラグイン。

• ✨ リリースノート
• 🏀 オンラインプレイグラウンド
• 📖 ドキュメント

機能

• 🪶 軽量、高速読み込み
• ❤️ 豊富な機能で使いやすい
• 🖼️ ライトボックス内の画像スライダー

クイックセットアップ

1. 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 は1つだけ必要です。すべての画像を配列に入れて、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