viewerjs配置
演示地址：http://demo.jb51.net/js/viewerjs/js/
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| inline | 布尔值 | false | 启用 inline 模式 |
| button | 布尔值 | true | 显示右上角关闭按钮（jQuery 版本无效） |
| navbar | 布尔值/整型 | true | 显示缩略图导航 |
| title | 布尔值/整型 | true | 显示当前图片的标题（现实 alt 属性及图片尺寸） |
| toolbar | 布尔值/整型 | true | 显示工具栏 |
| tooltip | 布尔值 | true | 显示缩放百分比 |
| movable | 布尔值 | true | 图片是否可移动 |
| zoomable | 布尔值 | true | 图片是否可缩放 |
| rotatable | 布尔值 | true | 图片是否可旋转 |
| scalable | 布尔值 | true | 图片是否可翻转 |
| transition | 布尔值 | true | 使用 CSS3 过度 |
| fullscreen | 布尔值 | true | 播放时是否全屏 |
| keyboard | 布尔值 | true | 是否支持键盘 |
| interval | 整型 | 5000 | 播放间隔，单位为毫秒 |
| zoomRatio | 浮点型 | 0.1 | 鼠标滚动时的缩放比例 |
| minZoomRatio | 浮点型 | 0.01 | 最小缩放比例 |
| maxZoomRatio | 数字 | 100 | 最大缩放比例 |
| zIndex | 数字 | 2015 | 设置图片查看器 modal 模式时的 z-index |
| zIndexInline | 数字 | 0 | 设置图片查看器inline 模式时的 z-index |
| url | 字符串/函数 | src | 设置大图片的 url |
| build | 函数 | null | 回调函数，具体查看演示 |
| built | 函数 | null | 回调函数，具体查看演示 |
| show | 函数 | null | 回调函数，具体查看演示 |
| shown | 函数 | null | 回调函数，具体查看演示 |
| hide | 函数 | null | 回调函数，具体查看演示 |
| hidden | 函数 | null | 回调函数，具体查看演示 |
| view | 函数 | null | 回调函数，具体查看演示 |
| viewed | 函数 | null | 回调函数，具体查看演示 |
下载
//我的版本是1.6.0
npm i viewerjs
main.js
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
Vue.use(Viewer)
Viewer.setDefaults({
Options: {
'inline': true,
'button': true,
'navbar': true,
'title': true,
'toolbar': true,
'tooltip': true,
'movable': true,
'zoomable': true,
'rotatable': true,
'scalable': true,
'transition': true,
'fullscreen': true,
'keyboard': true,
'url': 'data-source'
}
})
vue文件 点击图片直接预览
<viewer :images="images">
<el-row :gutter="20">
<el-col :span="6" v-for="(src,index) in images" class="">
<div class="grid-img">
<img class="img" :src="src.src" :key="index" :onerror="errorImg">
</div>
<div class="grid-text">
<p>病案首页</p>
</div>
</el-col>
</el-row>
</viewer>
images: [
'https://img1.baidu.com/it/u=3231513395,3547618814&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
'https://img0.baidu.com/it/u=3361720531,2891890487&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800',
'https://img2.baidu.com/it/u=3283516184,1511598906&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=313',
'https://img1.baidu.com/it/u=3231513395,3547618814&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
]
vue文件 点击事件预览图片
点击事件触发图片预览需要 启用 inline 模式
<viewer :images="images" @inited="viewerRichText">
<el-row :gutter="20">
<el-col :span="6" v-for="(src,index) in images" class="">
<div class="grid-img">
<img class="img" :src="src.src" :key="index" :onerror="errorImg">
</div>
<div class="grid-text">
<p>病案首页</p>
</div>
</el-col>
</el-row>
</viewer>
<el-button type="primary" icon="" size="mini" @click="imgViewer()">预览</el-button>
images: [
'https://img1.baidu.com/it/u=3231513395,3547618814&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
'https://img0.baidu.com/it/u=3361720531,2891890487&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800',
'https://img2.baidu.com/it/u=3283516184,1511598906&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=313',
'https://img1.baidu.com/it/u=3231513395,3547618814&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
]
imgViewer(index) {
//从第一张开始显示
this.$viewer.show();
//从当前下标开始显示
this.$viewer.view(index);
},
viewerRichText(viewer){
this.$viewer = viewer;
},
效果
版权声明：本文为qq_44724181原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。