1const previewFun = (data_)=>{2setTimeout(() =>{3imgViewRef.value.$el.children[0].click();4}, 0);5} 注意:这里增加延时,是因为初始化点击的时候el-image会先显示图片,再触发预览效果,如果图片没有显示出来,点击不会出现预览效果。
这是因为Vue的DOM更新是异步的,直接使用this.$refs.imageViewer.$el.click();可能会因为DOM还未更新而导致无法正确触发预览。 3. 确保预览功能正确响应 通过上面的步骤,你应该已经实现了点击按钮触发el-image组件的图片预览功能。确保你的图片URL是有效的,并且el-image组件的preview-src-list属性包含了正确的图片列表...
方法二 直接把image-viewer源码等相关文件copy出来 此法过于繁琐,因为牵涉到的方法还蛮多 方法三: 依然使用el-image。只不过不传src,然后使用slot error来自定义需要显示的布局。 从el-image源码可以看到,点击img触发下方方法进行预览 clickHandler() { // don't show viewer when preview is false if (!this....
点击左右按钮时 想获取图片的index <el-image v-for="(pic, index) in picList" :key="index" style="width: 100px; height: 100px" :src="pic.url" @change="handleImageChange" :preview-src-list="srcList"> </el-image> change事件无法调用 vue.jselement-ui 有用关注1收藏1 回复 阅读3.5k 2...
element-ul有大图预览功能 但我们不想展示图片,想实现的是点击按钮,或者通过js事件触发,能预览大图(多张也可以预览)的功能。 1、导入组件 // 导入组件importElImageViewerfrom"element-ui/packages/image/src/image-viewer"; 2.注册组件 components:{ElImageViewer,}, ...
实现逻辑:点击文字的时候触发previewSrcList的点击事件触发预览 本地npm run dev 功能正常,然而打包后放在线上,预览不触发,页面有个上传功能,上传图片的时候会触发页面的预览功能(仅触发第一张图) 后面调整了el-image元素的位置,让其和触发的文字按钮在同一个父元素内,功能就正常了...
[Component] [image] ElImage (lazy) can only trigger loading when scrolling, so ElImage that arranges the viewport out into the viewport through sorting cannot trigger loading. ElImage(lazy)只能滚动时触发加载,因此对于通过排序将视口外排到视口内的 ElImage 未能触发加载。#13513 ...
在项目开发中,使用<el-image> 组件实现显示头像,更新头像之后,使用的vuex的携带的userInfo已经更新了,但是头像视图没有触发更新,排查发现,原来后端设计的是该用户的头像默认命名一致,也就是说头像的url没有改变,只是你再去请求一次的话,就可以获取最新头像,基于此,只要想到每次更新后,头像url改变就可以触发视图更新了...
Element Plus Playground Steps to reproduce 点击图片会打印俩次log What is Expected? 只触发一次click What is actually happening? 实际触发俩次click Additional comments 所有的el-image都会触发,目前只能用div包裹,事件发在div上,比较急 chenxchcommented ...
drag"><el-buttonv-if="imageUrl"size="small"type="success">已上传,可点击修改</el-button><el-buttonsize="small"type="primary"v-else>点击上传</el-button>将单张图片拖到此处,或点击上传</el-upload><el-dialog:visible.sync="dialogVisible":append-to-body="true":modal-append-to-body="false...