- 业务逻辑描述:
- 获取图片成功时,图片展示,可点击进行预览;获取失败时,图片显示默认的,不可点击不能预览;
- 点击哪张图片,预览时这张图片显示在第一个,点击左右键可滑动查看图片;
成功时: 失败时:
预览时:
- 预览图片组件 showPreview.vue 实现技术点:
- 图片的高度固定是82px,宽度需要根据实际情况决定,这时候可以写一个v-width指令,用来设置图片的宽度,可以是px也可以是%
- 预览图片时,每次都把当前点击的图片作为第一个,需要定义一个新的数组 imagesPreview 根据点击图片的index来重组数据
<template>
<div class="hi-upload-file">
<template v-if="arrFileData && arrFileData.length > 0">
<!-- 1、图片展示 -->
<div class="file-icon img" v-for="(file,index) in arrFileData" :key="index" @click="showImage(index)" v-width="widthData">
<el-image :src="file.url" @error="loadError">
<div slot="error" class="image-error"></div>
</el-image>
<!-- 下载图标展示与否操作 -->
<span class="el-upload-actions" v-if="downLoadFlag">
<!-- 技术点:注意事件冒泡,使用stop阻止一下 -->
<span class="save" @click.stop="doSave(file)"></span>
</span>
</div>
<!-- 2、图片预览 -->
<el-dialog :visible.sync="dialogVisible" :modal-append-to-body='false' >
<!-- 技术点:一定使用v-if="dialogVisible" 不能使用v-show,否则图片展示时(假设点击的是第3张),前两张会快速的滑过-->
<div class="block" v-if="dialogVisible">
<el-carousel trigger="click" class="imgbox" :autoplay="false" arrow="always" indicator-position="outside">
<el-carousel-item v-for="(item,index) in imagesPreview" :key="index">
<img :src="item.url" height="100%">
</el-carousel-item>
</el-carousel>
</div>
</el-dialog>
</template>
<template v-else>
<span>无</span>
</template>
</div>
</template>
<script>
import Vue from 'vue'
export default {
props:{
/** 显示图片数组,格式如下
* [{
* url:"图片url",
* name:"图片名"
* },
* ...
* ]
*/
arrFileData:{
type:Array,
default:function(){
return [];
}
},
// 图片宽度,默认82px,也可以传百分比,如30%
widthData:{
type:String,
default:'82px'
},
},
directives: { //自定义宽度指令
'width':{
bind(el,binding) {
el.style.width=binding.value
},
}
},
data() {
return {
dialogVisible: false,//预览窗口是否展示,默认不展示
downLoadFlag:true,//下载图标展示与否,默认展示
imagesPreview:[],//预览时根据点击的index重组的数据
};
},
methods: {
/** 图片加载失败调用 */
loadError(event){
this.downLoadFlag=false;//下载图标不显示
},
/** 图片预览 */
showImage(index){
if(!this.downLoadFlag){
return false;
}
this.imagesPreview=[];
this.dialogVisible=true;
let imgArr=this.arrFileData;
let before = imgArr.slice(0, index)
let after=imgArr.slice(index);
this.imagesPreview=after.concat(before);
},
doSave(file){
.....
},
/** 获取文件下载地址 */
getFileDownUrl(file){
......
},
}
}
</script>
<style lang="stylus" scoped>
@import "~assets/stylus/upload"
</style>
- 父组件引用预览组件,需要传递 图片数据和宽度:
<!-- 1、使用默认值 -->
<show-preview :arrFileData="imageDate"></show-preview>
<!-- 2、百分比 -->
<show-preview :arrFileData="imageDate" :widthData="'30%'"></show-preview>
<!-- 3、像素 -->
<show-preview :arrFileData="imageDate" :widthData="'80px'"></show-preview>
imageDate:[
{url:***,name:***},
{url:***,name:***},
{url:***,name:***},
]