精简代码后发现是 ElementPlus el-image的 previewSrcList 属性和 translateY 冲突( translateX 等也冲突)。 如果没有外层div、只有el-image,但是 el-image 上增加transform: translateY(-5px);鼠标移动时图片不会闪烁,但是预览仍是小图不是大图。 精简代码后错误效果如下: vue2中el
在Vue 3中使用el-image组件,首先需要确保已经安装了Element Plus库,并在项目中进行了引入。 bash npm install element-plus --save 然后在你的Vue组件中引入el-image: vue <template> <el-image :src="imageUrl" /> </template> <script setup> import { ref } from 'vue...
但element这个<el-image>组件存在一个问题:它的大图必须通过点击小图触发,而文档上并没有点击事件的接口。 这就意味着,无法实现“点击其他自定义的按钮来显示大图”,只能“点击<el-image/>小图”来调用它内部的事件。 其他的解决方法——<el-image-viewer/> ...
尝试过vue-router中的RouterLink包裹的element-plus的el-image换成image 可是图片不见了,附加期望:vue-router中的RouterLink包裹的el-image换成image后图片可见,主要期望:鼠标悬浮在图片上时在图片底部不显示多余的颜色块。 以下为代码 <el-row :gutter="20"> <el-col :span="12" :offset="6" style="text-...
class="el-image-viewer__btn el-image-viewer__prev" :class="{ 'is-disabled': !infinite && isFirst }" @click="prev" > <svgxmlns="http://www.w3.org/2000/svg"viewBox="0 0 1024 1024"> <path fill="currentColor" d="M609.408 ...
最近公司搭建了一个新的 vue3 项目,因为项目中有很多模块用到了图片预览功能,项目的 ui 框架用的是element-plus,框架自带 el-image 组件里面带了图片预览功能,但是当时我不想用这个组件,所以就借鉴了它里面预览图片组件的代码。 复习vue3指令的写法 官方指令文档:https://cn.vuejs.org/guide/reusability/custom-...
vue 3 element组件el-image的坑 简介:( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃ 发现了这个坑,立马来发个文章水一水 ( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃ 发现了这个坑,立马来发个文章水一水 <el-image src="../assets/logo.png"></el-image>...
[Vue3+Element-Plus]点击列表中的图片预览时,图片被表格覆盖。 简介:点击图片进行预览,但是还能继续选中其他的图片进行预览,鼠标放在表格上,那一行表格也会选中,如图所示第一行,那么该如何解决呢? 问题如下: 点击图片进行预览,但是还能继续选中其他的图片进行预览,鼠标放在表格上,那一行表格也会选中,如图所示第一行,...
本项目是基于前端(vue3+vite+pinia) 后端(nodejs+exporess) + mysql 的全手搓个人博客,没有用任何BLOG框架,95%的代码都纯原生标签。 当时为了方便了按需引入了 elementPLUS 的el-image进行二次封装,实现图片的来加载优化, 以及部分其他elementPLUS的其他组件。
<el-image style="width: 60px;height: 60px;" :src="scope.row.avatar" :preview-src-list="[scope.row.avatar]" hide-on-click-modal="true" preview-teleported="true"> <template #error> <el-icon><user /></el-icon> </template> </el-image>...