vue项目elementUI预览图片

我不是女神ヾ 2022-12-28 07:16 743阅读 0赞

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70 1]  
如上图所示，只有点击 图片预览 按钮才会有图片预览的效果，实现方案如下：有两种方案：  
第一种：使用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 样式

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

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

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

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70]: /images/20221120/cd9fdec62b2447559d14d43461441068.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70 1]: /images/20221120/0ab4bf1dddbd475383144287a00f5ca4.png