• 前端公共组件 components
  • • iv-view-image （全屏图片预览）

iv-view-image （全屏图片预览）

概述

配合iview跑马灯实现图片预览，组件存放路径 src/components/iv-view-image
在http://localhost:8080/viewImage，可以查看demo演示

使用方式 (已注册全局组件)

 // 文件内直接使用
 <iv-view-img />

props 属性

属性	说明	类型	默认值
interval	自动播放间隔时间	Number	3000
value	控制显示或隐藏，可用v-model	Boolean	false
view-value	从索引开始显示图片	number	0
toolbar	是否在顶部显示title	[Boolean, Number]	true
title	图片名字显示	[Boolean, Number]	true
navbar	导航栏显示	[Boolean, Number]	true
minZoomRatio	最小缩放比例	Number	0.1

详细看: https://github.com/fengyuanchen/viewerjs#options

event 事件

属性	说明	返回值
on-close	关闭右上角事件	图片组件实例
on-change	切换图片时触发，激活的索引，原索引，当前data对象，图片实例	oldValue, value, itme, this

slot 插槽

属性	说明
fixRight	自定义右上角关闭内容
noDataSlot	当data数据为空时自定义内容

  编辑：zhanfei2024