先附上v-viewer的官方中文文档 viewer文档
安装:
cnpm i v-viewer
引入:
import 'viewerjs/dist/viewer.css'
import Viewer from 'v-viewer'
import Vue from 'vue'
Vue.use(Viewer)
这篇文章只介绍两种使用方法:指令形式调用 和 组件形式调用
1.指令形式调用
<div class="images"
v-viewer="{
inline: false,
button: true,
navbar: false,
title: false,
toolbar: true,
tooltip: false,
movable: true,
zoomable: true,
rotatable: true,
scalable: false,
transition: true,
fullscreen: true,
keyboard: false,
loop: false,
}"
>
<img src="1.jpg">
<img src="2.jpg">
</div>
这种方法快捷方便,只需要在img标签的外层,无论是div盒子,还是其他框架的item上,直接放属性就好,属性里面的值控制什么这里就不一一排列了,大家可以根据项目需求挨个试一下
2.组件形式调用
<viewer :images="images" :options="viewOptions">
<img v-for="src in images" :src="src" :key="src">
</viewer>
data(){
return{
viewOptions:{
fullscreen: true,
keyboard: false,
loop: false,
//其他属性
}
}
}
images就是你需要展示的图片数组,options绑定的就是上述的一些属性
3.ant-design框架upload组件和viewer组件的混搭
项目的cd需求是驱赶程序员不断进步的条件
上传毕之后的图片.,我们就放在div中让他静静展示,需要预览,那么使用插件形式就很方便快捷,但是upload组件中的如何预览呢?
首先,我们需要在template中写入组件的代码
<viewer :images="attachFileList" :options="viewOptions" @inited="inited" rebuild>
<img v-show="false" v-for="(item,index) in attachFileList" :src="item.url" :key="index" />
</viewer>
注意:img给设置了v-show=false , 这样做的原因是: 如果不设置false,那么就会出现上传组件之外的图片,我们点击上传组件,才让预览的图片展示.
methods中这两个方法必不可少:
inited(viewer) {
this.$viewer = viewer;
},
handlePreview(file) {
for(let i in this.attachFileList){
if(this.attachFileList[i].url == file.url){
this.$viewer.index=i;
}
}
this.$viewer.show();
},
inited初始化,这个不不必多讲
第二个方法其实绑定的就是upload组件中点击预览的回调
这之中做了两步: 1. 获取你点击的哪个图片
2.展示预览图片
4.样式修改
viewer 就是yyds ~ 但我个人还是觉得存在样式的缺陷: 比如操作按钮过小,右上角关闭按钮太靠上,偶尔会被项目中的header遮挡等
.viewer-button {
height: 60px!important;
width: 60px!important;
top:65px!important;
right:4px!important;
}
.viewer-button::before {
bottom: 20px!important;
left: 20px!important;
}
.viewer-toolbar > ul > li {
height: 36px!important;
width: 36px!important;
}
.viewer-toolbar > ul > li::before {
margin: 8px!important;
}
自己新建一个css文件,然后在引入viewer的地方也引入这个吧 !
哒哒尅 哒哒尅 ge~