响应式图片组
Vue 3 组件:用于渲染具有自动布局样式(大图、双图或图标)的响应式图片组。
https://www.npmjs.com/package/@miletorix/vitepress-image-group
https://github.com/miletorix/miletorix-vitepress-image-group
安装
sh
npm install -D @miletorix/vitepress-image-groupsh
yarn add -D @miletorix/vitepress-image-groupsh
pnpm add -D @miletorix/vitepress-image-groupsh
bun add -D @miletorix/vitepress-image-group配置
ts
// .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;使用
md
<ImageGroup
:sources="[
'/assets/imgae-group-01.jpg',
'/assets/imgae-group-02.jpg'
]"
type="double"
caption="Images from both sides."
/>

Images from both sides.
md
<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"
/>


