废话不多说，直接上代码：
1、首先，项目需要先引入 element 组件
2、第一种预览方式
1、组件使用
<div style="display: inline-block;width: 10px;width: 84%;">
<el-upload multiple action="#" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove"
:on-exceed="(fileList)=>{this.$message({type:'warning' , message : '已选数量超出上传限制，请重新选择'})}" :on-change="handleChange" accept=".png, .jpg, .jpeg" :auto-upload="false" :file-list="fileList" :limit="3"
:class="fileList && fileList.length >= 3 ? 'hide' : 'show'">
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :append-to-body="true" :visible.sync="PreviewVisible" style="width: 60%;margin-left: 20%;">
<el-image style="width: 500px;height: 500px;" :src="dialogImageUrl" fit='fill' alt=""></el-image>
</el-dialog>
</div>
js：
handlePictureCardPreview(file) {
console.log(file)
this.PreviewVisible = true;
this.dialogImageUrl = file.url;
},
第二种预览方案
App.vue
<template>
<div id="app" :pageName="$route.name">
<router-view v-if="isRouterFresh"></router-view>
<!--图片预览-->
<el-image-viewer v-if="showViewer" :on-close="closeViewer" :url-list="showViewerImages" :initialIndex="initialIndex" />
</div>
</template>
<script>
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
export default {
name: "app",
components: { ElImageViewer },
data() {
return {
// 图片预览
showViewer: false,
showViewerImages: [], // 预览地址集合['xxx.jpg','xxx.jpg']
//重新渲染页面
isRouterFresh: true,
initialIndex: 0,
}
},
methods: {
// 预览
createPreview(arrUrl) {
this.showViewerImages = arrUrl;
this.showViewer = true
//检查播放器
if (window.oWebControl) {
window.oWebControl.JS_HideWnd();
}
},
closeViewer() {
this.showViewer = false;
this.showViewerImages = [];
//检查播放器
if (window.oWebControl) {
window.oWebControl.JS_ShowWnd();
}
},
isFreshView() {
this.isRouterFresh = false;
this.$nextTick(() => {
this.isRouterFresh = true;
});
}
},
created() {
var vue = this;
//调用方式：window.createPreview(['ddd.jpg', 'ddd.jpg'])
window.createPreview = function (arrUrl, initialIndex) {
vue.createPreview(arrUrl)
vue.initialIndex = initialIndex
}
window.isFreshView = function () {
vue.isFreshView();
}
//禁止右键
// window.oncontextmenu = function(){
// return false;
// }
}
};
</script>
<style lang="less">
#app {
height: 100%;
}
</style>
组件的使用
vue文件：
<div style="display: inline-block;width: 10px;width: 84%;">
<el-upload multiple action="#" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove"
:on-exceed="(fileList)=>{this.$message({type:'warning' , message : '已选数量超出上传限制，请重新选择'})}" :on-change="handleChange" accept=".png, .jpg, .jpeg" :auto-upload="false" :file-list="fileList" :limit="3"
:class="fileList && fileList.length >= 3 ? 'hide' : 'show'">
<i class="el-icon-plus"></i>
</el-upload>
</div>
js 图片预览：
handlePictureCardPreview(file) {
window.createPreview([file.url]);
},
遮罩层层级需要设置一下：
.el-image-viewer__wrapper{
z-index: 99999999999 !important;
}第三种预览方案viewer.js
1、下载资源包
Viewer.js官网下载地址：Viewer.js
CSDN下载
2、将下载的js引入本地
main.js
//图片预览
import '@/assets/viewer/viewer.css'
import VueViewer from '@/assets/viewer/index.mjs'
app.use(VueViewer, {
defaultOptions: {
zIndex: 9999, //图片查看器的modal模式时的z-index
title : false, //显示当前图片标题
navbar: false, //缩略图导航
BUTTONS : ['prev', 'next' ,'zoom-in', 'zoom-out', 'one-to-one', 'rotate-right']
}
})
App.vue
previewImages(urls ,index = 0){
this.$viewerApi({
images : urls,
options : {
initialViewIndex : index
}
})
},操作图片的vue
<el-form-item label="附件" prop="att_info" online>
<div style="display:flex; flex-wrap: wrap;">
<el-upload ref="upload" action="#" multiple :limit="9 - dialogData.att_info.length" accept=".jpg,.jpeg,.png,.bmp,.pdf,.xls,.xlsx,.doc,.docx" :show-file-list="false" :on-exceed="(fileList)=>{this.$message({type:'warning' , message : '已选数量超出上传限制，请重新选择'})}" :on-change="uploadChange" :auto-upload="false" style="display:none;" v-if="uploadFresh" />
<div class="avatar avatar-animate" v-for="(item ,index) in dialogData.att_info" :key="index" style="margin-right:10px;">
<div class="img-box" v-if="item.file_url">
<img v-if="item.mime_type == 'image/png' || item.mime_type == 'image/jpg' || item.mime_type == 'image/jpeg' || item.mime_type == 'image/bmp'" :src="item.file_url" />
<img v-if="item.mime_type == 'application/pdf'" src="/static/images/pdf.png" />
<img v-if="item.mime_type == 'application/msword' || item.mime_type == 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'" src="/static/images/word.png" />
<img v-if="item.mime_type == 'application/vnd.ms-excel' || item.mime_type == 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'" src="/static/images/excle.png" />
<span>
<i-zoom-in @click.stop="previewImages(index)" />
<i-delete @click.stop="deleteImages(index)" />
</span>
</div>
</div>
<div class="d-upload" @click="uploadClick" v-if="dialogData.att_info.length < 9"><i-plus /></div>
<p style="color:#999; display:block; width:100%; padding:5px 0 0; line-height:20px; font-size:12px;">附件支持png、jpg、bmp、pdf、word、xls且最多可上传9个，单附件不能超过10M，请压缩后再上传</p>
</div>
</el-form-item>
previewImages(index) {
switch(this.dialogData.att_info[index].mime_type){
case 'image/png':
case 'image/jpg':
case 'image/jpeg':
case 'image/bmp':
//标记
var imgItems = JSON.parse(JSON.stringify(this.dialogData.att_info))
imgItems[index].indexNow = true
imgItems = imgItems.filter(c=>c.mime_type == 'image/png' || c.mime_type == 'image/jpg' || c.mime_type == 'image/jpeg' || c.mime_type == 'image/bmp')
window.$previewImages(imgItems.map(c=>c.file_url) , imgItems.findIndex(c=>c.indexNow))
break;
default:
window.open(this.dialogData.att_info[index].file_url)
break;
}
},第四种预览方案
<div class="demo-image__preview" style="height: 0;">
<el-image style="height: 0;" ref="previewImg" :preview-src-list="imageUrlListYl" :src="imageUrlYl"></el-image>
</div>
imageUrlYl:'',
imageUrlListYl:[],
handlePictureCardPreview(file) {
this.imageUrlYl = file.url
this.fileList.forEach(item => {
this.imageUrlListYl.push(item.url)
})
this.$refs.previewImg.showViewer = true
},附送250套精选项目源码
源码截图
源码获取：关注公众号「码农园区」，回复 【源码】，即可获取全套源码下载链接
