@composy/image-viewer-vue

@composy/image-viewer-vue

本轮行为增强

动态更新 images 时，建议为每项提供稳定的 id。Core 会按 id（缺省时按 src）保留当前图片，并同步 currentIndex、currentImage、播放状态和变换状态；组件销毁时会清理这些响应式状态。

基于 @composy/image-viewer-core 的 Vue 适配层，提供 ImageViewer 组件、 useImageViewer composable 和插件入口。

功能特性

• 🧩 Vue 3 组件
• 🪝 组合式函数 (Composables)
• ⚡ 响应式数据绑定

安装

npm install @composy/image-viewer-vue

快速开始

<script setup lang="ts">
import type { ImageItem } from '@composy/image-viewer-core'
import { ImageViewer } from '@composy/image-viewer-vue'
import { ref } from 'vue'

const visible = ref(false)
const images: ImageItem[] = [{ src: '/photos/1.jpg', alt: '照片 1' }]
</script>

<template>
  <button type="button" aria-label="打开图片查看器" @click="visible = true" />
  <ImageViewer v-model:visible="visible" :images="images" />
</template>

ImageViewer 仅支持 Vue 3。组件会透传 Core 的 minZoom、maxZoom、zoomStep、 counter 和 classPrefix 配置；classPrefix 可用于同页挂载多套独立样式前缀。

目录结构

packages/vue/
├── src/              # 源码
│   ├── components/    # ImageViewer 组件
│   ├── composables/   # useImageViewer
│   └── plugins/       # Vue 插件
├── .ldesign/         # Builder 与 ESM/CJS TypeScript 权威配置
├── package.json
├── tsconfig.json     # 指向 .ldesign 的兼容入口
└── tsconfig.cjs.json # CJS 兼容入口

依赖

• @composy/image-viewer-core — 核心引擎
• vue peer dependency；Core 是运行时依赖

构建与验证

在 workspace 根目录依次构建 Core 后，可运行：

pnpm --dir packages/vue run build
pnpm --dir packages/vue run type-check
pnpm --dir packages/vue run type-check:cjs
pnpm --dir packages/vue run lint:check

License

MIT