VUE-使用element实现图片预览功能

• 业务逻辑描述：

1. 获取图片成功时，图片展示，可点击进行预览；获取失败时，图片显示默认的，不可点击不能预览；
2. 点击哪张图片，预览时这张图片显示在第一个，点击左右键可滑动查看图片；

 

成功时：      失败时：

预览时：

• 预览图片组件 showPreview.vue 实现技术点：

1. 图片的高度固定是82px，宽度需要根据实际情况决定，这时候可以写一个v-width指令，用来设置图片的宽度，可以是px也可以是%
2. 预览图片时，每次都把当前点击的图片作为第一个，需要定义一个新的数组 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:***},
]