vue elementui 图片预览。el-image-viewer图片查看器。修改图片预览的自带样式。点击哪一个就查看哪一个图片

电脑版发表于：2020/9/9 10:19

**先引入图片预览的组件**
```
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'

export default {
    components: {
        ElImageViewer
    },
	.....
	data() {
        return {
            showViewer: false,
            initialIndex: 0,
            fileUrls:["url1","url2","url3"]
        }
    },
}
```
**然后在页面上加入图片预览的组件**
主要的属性有urlList,on-close,initial-index等属性。

tn2>urlList用来放图片链接
on-close用来关闭查看器
initial-index用来设置打开预览器显示的图片索引

基本的使用如下：
```
<template>
  <div>
    <el-button @click="onPreview">预览</el-button>
    <el-image-viewer 
           v-if="showViewer" 
           :on-close="closeViewer"
		   :initial-index="initialIndex"
           :url-list="fileUrls" />
  </div>
</template>
<script>
  // 导入组件
  import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
  
  export default {
   name: 'Index',
   components: { ElImageViewer },
   data() {
    return {
         showViewer: false,//图片预览是否显示
         initialIndex: 0,//打开图片预览时候的索引
         fileUrls:["url1","url2","url3"]//图片的地址
    }
   },
   methods: {
    //点击按钮打开图片预览
    onPreview() {
     this.showViewer = true
    },
    // 关闭查看器
    closeViewer() {
     this.showViewer = false
    }
   }
</script>
```
### 实际使用
实际使用的时候要灵活运用一点。比如这种效果，点击上传的图片实现预览
![](https://img.tnblog.net/arcimg/aojiancc2/9f59f7128fb042be8bdc3df0e5e2b39c.png)
点击哪一个就查看哪一个图片，所以开始预览的时候需要传递一个索引，这个比较简单显示图片的时候有索引，预览的时候传递过去就性格了
```
//打开图片预览
onPreviewImg(i) {
    //设置预览图片的索引
    this.initialIndex = i
    this.showViewer = true
}
```

tn2>tip:如果是vue3下面的el-image，可以自带预览，直接设置:preview-src-list="state.srcList" :initial-index="i" 这两个属性就行了。具体参考官网



还有就是绑定图片的时候列表可能不仅仅只有图片路径还有其他字段，我们可以通过js的map只获取图片的路径，比如：
```
:url-list="taskResoult.imgJson.map(a=>a.fileUrl)"
```
这些都可以灵活的来。贴一个完整一点的代码，包括一些样式图片上传这些等。
```
<template>
    <div>
        
        <div class="form-content panle">
            <div class="img-boxs">
                <div v-for="(item,i) in taskResoult.imgJson" :key="i+'img'" class="img-waper" @click="onPreviewImg(i)">
                    <img :src="'/oss/api/ImageViewer/'+item.id+'.jpg?percent=0.6&quality=80&od=true'" width="79px"
                        height="79px">
                    <div class="remove-icon" @click="rmImgs(i)">
                        <img src="/asserts/img/error.png">
                    </div>
                </div>
                <div v-if="taskResoult.imgJson.length<9" class="img-waper">
                    <div class="add-btn" @click="addImgClick">
                        <input ref="inputImgFile" type="file" @change="uploadimg" style="display: none;"
                            accept="image/*">
                        <div class="icon-waper">
                            <div class="icon-x" />
                            <div class="icon-y" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
        

        
        <el-image-viewer v-if="showViewer" :z-index="20000" :initial-index="initialIndex" :append-to-body="true"
            :on-close="closeViewer" :mask-closable="false" :url-list="taskResoult.imgJson.map(a=>a.fileUrl)" />
        
    </div>

</template>
  
<script>
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
export default {
    // 组件名字
    name: 'UpLoadImg',
    components: {
        ElImageViewer
    },
    // 组件参数
    props: {
        index: {
            type: Number,
            default: 0
        },
    },
    data() {
        return {
            showViewer: false,
            initialIndex: 0,
            taskResoult: {
                'uploadFileID': '',
                stuImgs: '',
                imgJson: [],
                'uploadFileInfo': '',
                uploadFileInfoJson: {},
                'remarks': null
            }
        }
    },
    mounted() {
        this.initPic()
    },
    // 组件方法
    methods: {
        initPic() {
        },
        //点击添加图片，直接触发文件选择框的事件即可
        addImgClick() {
            this.$refs.inputImgFile.click()
        },
        //打开图片预览
        onPreviewImg(i) {
            //设置预览图片的索引
            this.initialIndex = i
            this.showViewer = true
        },
        // 关闭图片预览
        closeViewer() {
            this.showViewer = false
        },
        rmImgs(i) {
            this.taskResoult.imgJson.splice(i, 1)
            // console.log(self.taskResoult)
            this.$forceUpdate()
        },
        //上传图片逻辑。文件选择框的change事件触发
        uploadimg(e) {
            // 日精进上传图片
            const imgFileExtensionArry = ['png', 'jpg', 'jpeg', 'bmp', 'gif', 'webp', 'psd', 'svg', 'tiff']
            const file = e.target.files[0]
            const fileExt = file.name.substr(file.name.lastIndexOf('.') + 1)
            if (imgFileExtensionArry.indexOf(fileExt.toLowerCase()) === -1) {
                this.$message.warning('仅允许提交图片文件!')
                return
            }
            const formData = new FormData()
            formData.append('bucketName', 'labroom')
            formData.append('filePath', 'labresult')
            formData.append('FileType', 1)
            formData.append('file', file)
            if (this.taskResoult.stuImgs && this.taskResoult.imgJson.length === 9) {
                this.$message.error('不允许超过9张图片')
                return
            }

            const self = this
            self.$service.api.UpLoadFormFile(formData).then(res => {
                const imgInfo = {
                    id: res.data.id,
                    fileName: res.data.title,
                    fileUrl: '/oss/api/ImageViewer/' + res.data.id + '.jpg'
                }
                self.taskResoult.imgJson.push(imgInfo)
                console.log(self.taskResoult)
                self.$forceUpdate()
            })
        }
    }
}
</script>
<style scoped="scoped" lang="scss">
// 问题截图，传递图片的样式
.form-content.panle {
    // padding: 20px;
    padding-bottom: 10px;
    // background-color: #f8f8f8;

    .img-boxs {
        display: flex;
        /* margin-right: 46px; */
        flex-wrap: wrap;

        .img-waper {
            margin-right: 10px;
            margin-bottom: 10px;
            position: relative;

            .remove-icon:hover {
                cursor: pointer;

                img {
                    opacity: 0.6;
                }
            }

            .remove-icon {
                position: absolute;
                width: 14px;
                height: 14px;
                top: -8px;
                right: -5px;

                img {
                    width: 100%;
                }
            }
        }

    }

    .add-btn:hover {
        cursor: pointer;
        opacity: 0.6;
    }

    .add-btn {
        width: 79px;
        height: 79px;
        border: solid 1px #DDDDDD;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        justify-content: space-around;

        .icon-waper {
            width: 18px;
            height: 21px;
            position: relative;

            .icon-x {
                width: 19px;
                height: 5px;
                background-color: #DDDDDD;
                position: absolute;
                top: 0;
                bottom: 0;
                margin: auto;
            }

            .icon-y {
                height: 21px;
                width: 5px;
                background-color: #DDDDDD;
                position: absolute;
                left: 0;
                right: 0;
                margin: auto;
            }
        }
    }
}
</style>
```

### 修改自带样式：

比如可以在组件上面写一点样式
```
<el-image-viewer
            v-if="showviewer"
            :on-close="closeviewer"
            :url-list="urlList"
            style=" 80%; height: 80%; margin-left: 10%; margin-top: 5%"/>
```
**也可以自己写样式来覆盖控件里边的样式**
比如默认图片的最大宽度是100%我们都可以自己修改
```
<div class="my-el-image-viewer">
  <el-image-viewer v-if="showViewer" style="z-index:99999999;" :on-close="closeViewer" :initial-index="initialIndex"
    :url-list="details.feedbackImgs.map(a => a.fileUrl)" />
</div>

<style>
.my-el-image-viewer .el-image-viewer__img {
  max-width: 86% !important;
}
</style>
```
注意，样式就不要加上scoped了，不然样式无法作用到组件内容，只在当前组件起作用。而且为了防止样式污染其他样式，最好写样式的时候加个前缀，比如我这里的.my-el-image-viewer

剑轩

vue elementui 图片预览。el-image-viewer图片查看器。修改图片预览的自带样式。点击哪一个就查看哪一个图片

{{item.title}}