vue图片点击放大预览v-viewer
效果:
1、安装依赖
npm install v-viewer --save
2、全局引入
import Vue from 'vue';
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' }
})
3、使用
设:photo:[
{src0:“…/…/img.png”,src1:“…/…/img1.png“},
{src0:“…/…/img.png“,src1:“…/…/img1.png“},
{},{},]
photo->src0:为模糊图片的图片路径。
photo->src1:原图的图片路径。
<viewer :images="photo">
//photo 一定要一个数组,否则报错
<img
v-for="(src,index) in photo"
:src="src.src0"
:key="index"
:onerror="errorImg"
>
</viewer>
photo:路径集合
4、属性
重点:在做的过程中会遇见页面显示缩略图,点击图片查看要求显示原图,通过上面属性可以知道是设置url属性值,在全局引用中url:“data-source”,默认是设置的是当前标签下的src值,但是我们现在显示的图片是缩略图的模糊路径。现在就是要怎么改变url属性,实现自定义打开图片查看的路径。
<viewer :images="photo">
<img v-for="(src,index) in photo" :src='src.src0'
:data-original='`${src.src1}`'>
</viewer>
再将全局配置中 ‘url’: 'data-source’改为 ‘url’: 'data-original’即可。
简单实用,欢迎一块学习。