响应式图片组

Vue 3 组件：用于渲染具有自动布局样式（大图、双图或图标）的响应式图片组。

https://www.npmjs.com/package/@miletorix/vitepress-image-group
https://github.com/miletorix/miletorix-vitepress-image-group

安装

npm

npm install -D @miletorix/vitepress-image-group

yarn

yarn add -D @miletorix/vitepress-image-group

pnpm

pnpm add -D @miletorix/vitepress-image-group

bun

bun add -D @miletorix/vitepress-image-group

配置

Theme Config

// .vitepress/theme/index.ts
import type { Theme } from 'vitepress';
import DefaultTheme from 'vitepress/theme';

import { ImageGroup } from '@miletorix/vitepress-image-group'; 
import '@miletorix/vitepress-image-group/style.css'; 

export default {
  extends: DefaultTheme,
  Layout: () => {
    return h(DefaultTheme.Layout, null, {

    });
  },
  enhanceApp({ app, router, siteData }) {
   app.component('ImageGroup', ImageGroup); 
  },
} satisfies Theme;

使用

<ImageGroup
  :sources="[
    '/assets/imgae-group-01.jpg',
    '/assets/imgae-group-02.jpg'
  ]"
  type="double"
  caption="Images from both sides."
/>

Images from both sides.

<ImageGroup
  :sources="[
    '/assets/edge-logo.png',
    '/assets/chrome-logo.png',
    '/assets/firefox-logo.png',
    '/assets/safari-logo.png'
  ]"
  type="icon"
  caption="Browser icons: MS Edge, Google Chrome, Mozilla FireFox, Apple Safari"
/>

Browser icons: MS Edge, Google Chrome, Mozilla FireFox, Apple Safari