项目正在快速迭代中,API 与视觉细节可能随版本调整,请勿用于生产环境。开发迭代中,请勿用于生产环境。
Skip to content
仅桌面端保证样式

ImagePreview 图片预览 ​

EvImagePreview 全屏灯箱预览:遮罩 + 居中大图,支持左右箭头与键盘 ← → 切换、 Esc / 点击遮罩关闭、打开期间锁定页面滚动,多图时右下角显示计数。 通常配合 ImageWall 图片墙 使用,也可独立受控调用。

独立受控用法 ​

按钮打开预览
v-model 控制可见性,v-model:index 双向绑定当前下标。
vue
<EvImagePreview v-model="visible" v-model:index="index" :images="images" />
<EvButton @click="visible = true">打开图片预览</EvButton>

磨砂预览背景 ​

glass 磨砂灯箱
开启后遮罩减淡并整幅磨砂,页面在预览背后融成雾面;关闭/箭头按钮同步玻璃化。
vue
<EvImagePreview v-model="visible" glass :images="images" />

API ​

Props ​

属性说明类型默认值
modelValue (v-model)可见性booleanfalse
images图片列表:url 字符串或 { src, alt }array[]
index (v-model:index)当前下标number0
esc-closeEsc 关闭booleantrue
glass磨砂预览背景;缺省跟随全局(ConfigProvider glass)boolean—
blur磨砂强度(px),内联覆盖 --ev-glass-blurstring / number—
saturate磨砂饱和度(倍数),内联覆盖 --ev-glass-saturatestring / number—
tint磨砂底色浓度(%),内联覆盖 --ev-glass-bgstring / number—

事件 ​

事件说明
update:modelValue / update:index双向绑定
open / close打开 / 关闭时触发
change切换图片时触发,参数为新下标

基于 MIT 许可证发布