1. 确定el-image组件是否支持点击事件 el-image组件是Element UI提供的一个用于显示图片的组件。虽然Element UI的官方文档中没有明确说明el-image支持原生的点击事件,但你可以通过Vue的事件绑定机制来为其添加点击事件。 2. 查找el-image点击事件的正确用法 在Vue中,你可以使用@click指令来为任何元素(包括自定义组件...
在Vue2中,可以通过以下步骤调用el-image的click方法: 1.在Vue组件中,找到el-image的引用。可以通过ref属性来获取el-image的引用,例如: ```html <el-image ref="myImage" src="your-image-url"></el-image> ``` 2.在Vue组件的methods中定义一个方法,用于处理el-image的click事件。例如: ```javascript ...
Related Component N/A Reproduction Link Element Plus Playground Steps to reproduce 点击图片会打印俩次log What is Expected? 只触发一次click What is actually happening? 实际触发俩次click Additional comments 所有的el-image都会触发,目前只能用div包裹,事件发在div上,比较急 chenxchcommented wang-weilincomment...
clickHandler: function clickHandler() { // prevent body scroll prevOverflow = document.body.style.overflow; document.body.style.overflow = 'hidden'; this.showViewer = true; } 1. 2. 3. 4. 5. 6. 导致的bug 页面上有图片上传按钮,点击上传图片之后发现页面无法向下滚动,body标签的溢出被隐藏,看...
clickHandler:functionclickHandler(){// prevent body scrollprevOverflow=document.body.style.overflow;document.body.style.overflow='hidden';this.showViewer=true;} 导致的bug页面上有图片上传按钮,点击上传图片之后发现页面无法向下滚动,body标签的溢出被隐藏,看不到页面底部的内容。
clickHandler:functionclickHandler(){// prevent body scrollprevOverflow=document.body.style.overflow;document.body.style.overflow='hidden';this.showViewer=true;} 导致的bug 页面上有图片上传按钮,点击上传图片之后发现页面无法向下滚动,body标签的溢出被隐藏,看不到页面底部的内容。
小丑的帽子 14613573 发布于 2023-03-22 北京✓ 已被采纳 let prev = document.querySelector(".el-image-viewer__prev") let next = document.querySelector(".el-image-viewer__next") 获取到dome 然后操作prev.addEventListener('click', _ => {}) 有用 回复 查看全部 2 个回答 ...
然后在template中增加一个<el-image>的组件, 设置<el-image>组件的 preview-src-list, @click, 属性/事件 此外, 还需要在加载表格数据的时候, 获取到表格数据中所有的图片. 获取所有图片是为了点击图片显示大图预览的时候可以进行左右图片切换. 如果只想点击一个图片显示一张预览图的话, 这就更简单了 ...
可以在<el-table-column></el-table-column> 中增加一个<template slot-scope="scope"></template>的模板. 然后在template中增加一个<el-image>的组件, 设置<el-image>组件的 preview-src-list, @click, 属性/事件 此外, 还需要在加载表格数据的时候, 获取到表格数据中所有的图片. ...
<el-image @click="additional(entity.img)" :previer-sre-list="entity.imgInfo" /> // 绑定事件中传入自己要操作的图片url地址 previer-sre-list传入list即可 data(){ imgClickNum:0, // 用来记录点击了图片多少次 }, methods(){ additional(imgUrl){ ...