Skip to content

封装 ImageView 组件

更新: 2025/3/14 20:37:03 字数: 0 字

前言

Vitepress 的使用过程中,我发现当图片本身较大或者较为模糊时,显示不够清楚。

Vitepress 文档中并没有相关的解决办法,于是我决定写一个预览组件来满足这个简单需求。

网上有项目使用的是 vitepress-plugin-image-viewer

pnpm add vitepress-plugin-image-viewer

但是他们有一个缺点,我想实现的效果是:

图片
图2:xxxxx

希望他可以有注释图例,并且有阴影边框,这个组件 ImageView,我后面自己进行封装。

需求分析

需求

  1. 点击图片可以丝滑的放大展示,并且可以拖拽和缩放。
  2. 下方有图片的描述备注,图片的描述备注是居中的,并且是灰色的。
  3. 图片是有阴影的,并且有边框。

道友再会.