elementui 使用el-image 控件解决通过点击查看按钮两次才能实现预览图片

需求：点击查看按钮，将图片显示出来。
问题：查看按钮必须触发两次才会将图片显示出来
前端效果：
点击查看按钮，弹出来图片

图片展示：

解决方法有两种：
第一种调用Image 的源码中的image-viewer里面的方法，然后生成预览图片的框，然后通过查看按钮将预览图片的数据拿到，再调用image-viewer中的clickHandler方法，该方法会将image-viewer中的是否显示的标识置为ture,这样就可以显示了。
image-viewer中

image-viewer中的loadImage，clickHandler方法：

mounted() {if (this.lazy) {this.addLazyLoadListener();} else {this.loadImage();}
},
methods：{loadImage() {if (this.$isServer) return;// reset statusthis.loading = true;this.error = false;const img = new Image();img.onload = e => this.handleLoad(e, img);img.onerror = this.handleError.bind(this);// bind html attrs// so it can behave consistentlyObject.keys(this.$attrs).forEach((key) => {const value = this.$attrs[key];img.setAttribute(key, value);});img.src = this.src;},clickHandler() {// don't show viewer when preview is falseif (!this.preview) {return;}// prevent body scrollprevOverflow = document.body.style.overflow;document.body.style.overflow = 'hidden';// 这里就将showViewer 置为ture，data中showViewer为false，也就是不会显示，this.showViewer = true;},
}

接下来看当前页面，通过点击查看按钮预览图片

 <template slot-scope="scope"><div class="operation"><el-col :span="6"><el-imagev-show="false"ref="imga"src="":preview-src-list="srcList"/><el-button type="text" size="small" @click="showPicture(scope.row)">查看</el-button></el-col><el-col class="line" :span="2">|</el-col><el-col :span="6"><el-button type="text" size="small" @click="downLoadPicture(scope.row)">下载</el-button></el-col></div></template>

methods中

  showPicture(row) {console.log(row)this.srcList = []if (this.formTemplateId === '2' || this.formTemplateId === '6' || this.formTemplateId === '7') {if (!JSON.parse(row.userDetailInfo).photoUrl) {this.msgError('数据有误，请确认正确数据')} else {this.srcList.push(JSON.parse(row.userDetailInfo).photoUrl)this.$refs.imga.clickHandler()}} else {JSON.parse(row.userDetailInfo).list.forEach(obj => {if (obj.photoUrl) {this.srcList.push(obj.photoUrl)}})if (this.srcList.length === 0) {this.msgError('数据有误，请确认正确数据')} else {this.$refs.imga.clickHandler()}}}

注意还需要在mounted中调用loadImage方法，这个方法是在image-viewer中，不调用的话就会出现点击两次查看按钮才会出现图片的问题。我的理解是第一次点击的时候是去调用loadImage方法去生成图片预览的框框，当第二次点击查看按钮的时候图片预览的框框已经生成了，图片就可以放进去了然后就展示出来了。所以问了避免点击第二次才能出现图片的问题，我们就需要在点击查看的页面中调用loadImage方法，调用的时候需要在框框生成后，也就是mounted中而不是在create中，因为create中挂载阶段还没开始，el属性目前还没有生成，那image−viewer中的方法也就没有，使用this.el 属性目前还没有生成，那image-viewer中的方法也就没有，使用this.el属性目前还没有生成，那image−viewer中的方法也就没有，使用this.refs.imga.loadImage()方法就会不会成功执行。
mounted中

  mounted() {setTimeout(() => {this.$refs.imga.loadImage()this.srcList = ['']}, 100)},

这样就可以实现点击一次查看按钮就能预览图片。
第二种方法：直接在当前页面中引用el-image-viewer，这样一来就不用在mounted中调用image-viewer中的loadImage方法和clickHandler方法。然后需要重写关闭事件closeViewer，或者调用image-viewer中的closeViewer应该也是可以的，我这里是直接重写的closeViewer方法。
具体实现：
1先引用el-image-viewer组件到当前页面使用

引用：

import elImageViewer from 'element-ui/packages/image/src/image-viewer'

export default {components: {`在这里插入代码片`elImageViewer}
}

 <el-table-columnlabel="操作"width="180px"align="center"><template slot-scope="scope"><div class="operation"><el-col :span="6"><el-image-viewer v-if="imgViewerVisible" :url-list="srcList" :on-close="closeViewer" /><el-button type="text" size="small" @click="showPicture(scope.row)">查看</el-button></el-col><el-col class="line" :span="2">|</el-col><el-col :span="6"><el-button type="text" size="small" @click="downLoadPicture(scope.row)">下载</el-button></el-col></div></template></el-table-column>

data中定义：

data(){return{imgViewerVisible: false,// 用来控制预览的框框是否显示，有数据了才会出现预览的框框srcList: [],预览图片需要的图片地址，这里需要的是一个数组}
}

methods中：

methods:{showPicture(row) {console.log(row)this.srcList = []if (this.formTemplateId === '2' || this.formTemplateId === '6' || this.formTemplateId === '7') {if (!JSON.parse(row.userDetailInfo).photoUrl) {this.msgError('数据有误，请确认正确数据')} else {this.srcList.push(JSON.parse(row.userDetailInfo).photoUrl)this.imgViewerVisible = true// this.$refs.imga.clickHandler()}} else {JSON.parse(row.userDetailInfo).list.forEach(obj => {if (obj.photoUrl) {this.srcList.push(obj.photoUrl)this.imgViewerVisible = true}})if (this.srcList.length === 0) {this.msgError('数据有误，请确认正确数据')}}},closeViewer() {document.body.style.overflow = ''this.imgViewerVisible = false}
}

这两种方法就能解决点击两次查看按钮才能实现预览图片的效果。只需要点击一次查看就可以。上述是个人理解。描述有误的地方欢迎大家指正，大家有问题可加qq 876942434。一起进步~

elementui 使用el-image 控件解决通过点击查看按钮两次才能实现预览图片相关推荐

element-ui中el-tree树形控件-树节点的选择(选中当前节点,获取当前id并且获取其父级id)...
在element-ui的el-tree树形控件中默认获取选取当前选中id的方法是this.$refs.tree.getCheckedKeys(); 但是如果子节点不是全部选中的话,父节点算不选中. 由 ...
控件不响应点击事件解决办法
以前,我们判断控件是否被点击是根据它的坐标及尺寸判断的. 不过,在WP/SL中,是否被点击了还要增加一个判断依据,那就是这里是否有内容. 所以,有时我们的控件死活就是不响应点击事件,原因就在这里,点击 ...
veu中时间转换----element-UI上Date-Picker时间控件
veu中时间转换如果 this.startTime 为2020-09-20 则 new Date(this.startTime) // Sun Sep 20 2020 08:00:00 GMT+08 ...
Element-UI实现Tree 树形控件节点添加图标
Element-UI实现Tree 树形控件节点添加图标: 属于自定义节点内容,可以通过两种方法进行树节点内容的自定义:render-content 和 scoped slot. 1.scoped s ...
UI控件无法响应点击等事件的探索
2019独角兽企业重金招聘Python工程师标准>>> UI控件无法响应点击等事件的探索一.响应者链关于响应者链,有如下一段介绍:每一个应用有一个响应者链,我们的视图结构是一个N ...
android从九宫格全屏预览,仿微信朋友圈展示图片的九宫格图片展示控件，支持点击图片全屏预览大图...
AssNineGridView 仿微信朋友圈展示图片的九宫格图片展示控件,支持点击图片全屏预览大图(可自定义). 写在前面这是一个九宫格控件,本来是很久之前就写好了,现在才开源出来,也是看了很多优秀 ...
MFC high-speed-charting控件使用（添加垂直游标，两个控件的联动）
MFC high-speed-charting控件使用(添加垂直游标,两个控件的联动) 应用场景最近参与的一个项目中涉及到在一个对话框中添加两个high-speed-charting控件,在两个控件 ...
OCX控件在win10下的查看、删除、注册、卸载
OCX控件我们平时应该接触过很多,比如ActiveX控件.MFC ActiveX控件.还有我们在HTML网页中使用的ActiveX控件等,以上这些都归属与OCX控件的范围. 那么如何查看这些ocx控件 ...
asp.net html控件上传图片,asp.net fileupload控件上传图片并预览图片
本文为大家分享了fileupload控件实现上传图片后并进行预览图片的功能,并对web.config进行了配置,先看一下最终效果: 页面代码: 后台代码: using System; using Sy ...

elementui 使用el-image 控件解决通过点击查看按钮两次才能实现预览图片

elementui 使用el-image 控件解决通过点击查看按钮两次才能实现预览图片相关推荐

最新文章

热门文章

elementui 使用el-image 控件 解决 通过点击查看按钮两次才能 实现预览图片

elementui 使用el-image 控件 解决 通过点击查看按钮两次才能 实现预览图片相关推荐

最新文章

热门文章

elementui 使用el-image 控件解决通过点击查看按钮两次才能实现预览图片

elementui 使用el-image 控件解决通过点击查看按钮两次才能实现预览图片相关推荐