vue项目elementUI预览图片

vue项目elementUI预览图片
说明：
1，elementUI组件中已经实现了图片预览，点击图片会有预览的功能
2，根据产品需求，要不展示图片，点击“图片预览按钮或链接”才显示图片的预览功能，如下图所示

如上图所示，只有点击 图片预览 按钮才会有图片预览的效果，实现方案如下：有两种方案：
第一种：使用ref进行操作
1，将el-image标签中渲染后的图片进行隐藏
2，使用ref进行操作，在el-image标签中声明ref属性
3，通过Element源码得知，预览图片组件中控制是否显示使用的属性是showViewer
4，将showViewer设置为true即可
主要代码如下：

						 <el-image
                                class="my-img"
                                v-if="imageUrl"
                                ref="myImg"
                                :src="imageUrl"
                                :preview-src-list="srcList">
                        </el-image>

					<div class="my-pre" @click="doPriveImg">
					         图片预览
					    </div>

图片预览请求的方法

		doPriveImg(){
    
                this.$refs.myImg.showViewer = true
     
            },

css 样式

<style lang="less">
    .per-up{
        position: relative;
        .my-img{
            width: 100px;
            height: 100px;
            .el-image__inner{
                visibility: hidden ;
            }
        }
        .my-pre{
            position: absolute;
            margin-left: 111px;
            margin-top: -156px;
        }
    }
</style>

以上便是第一种方法，小编推荐使用第一种方法

第二种方法：操作dom元素，小编认为 不到万不得已就不要直接操作dom元素
1，通过调用 图片预览的方法 ，通过操作dom元素，直接触发image属性的click方法

doPriveImg(){
                let dom = document.getElementsByClassName('el-image__preview')
                dom[0].click()
            },

其他html代码和样式都和方法一 一样