element UI多图片展示

图片展示效果如下：
【使用for循环展示图片和对应图片名称，鼠标选中图片有阴影效果，可以自动换行】

对应图片上使用鼠标点击或鼠标悬浮，图片变大，展示如下：

完整代码

<template><div><div class="position">图片展示</div><div class="images"><div v-for="(item, index) in info" :key="index" class="image-middle">  <el-card shadow="hover" :body-style="{ padding: '10px' }">     //添加鼠标点击或悬浮图片放大功能<el-popover> <img :src="info[index].src" slot="reference" class="image"/>    <img :src="info[index].src" class="imagePreview"/></el-popover>  <div style="text-align:center;padding-top:12px"><span>{{info[index].name}}</span>   </div>     </el-card></div>     </div></div>
</template><style scoped>/* “Tissue Search”字体样式 */
.position {margin-left: 15px;font-size: 30px;font-weight: 600;
}
/* 图片总布局，样式 */
.images{display: flex;margin-top: 20px;margin-left: 21px;margin-right: 20px;flex-wrap: wrap;
}
/* 图片之间 */
.image-middle{margin-right: 15px;margin-bottom: 15px;
}
/* 单张图片样式 */
.image{width:110px;height: 110px;
}</style>
<script>
export default {data() {return {info:[{"id":1,"name":"userHead","src":require("../assets/tissueImages/userHead.png") ,},{"id":2,"name":"user","src":require("../assets/tissueImages/user.png") ,},{"id":3,"name":"haha","src":require("../assets/tissueImages/haha.png") ,},{"id":4,"name":"astronaut","src":require("../assets/tissueImages/astronaut.png") ,},{"id":5,"name":"build","src":require("../assets/tissueImages/build.png") ,},{"id":6,"name":"custom","src":require("../assets/tissueImages/custom.png") ,},{"id":7,"name":"sea","src":require("../assets/tissueImages/sea.png") ,},{"id":8,"name":"tree","src":require("../assets/tissueImages/tree.png") ,},{"id":9,"name":"Curry","src":require("../assets/tissueImages/Curry.png") ,},{"id":10,"name":"panda","src":require("../assets/tissueImages/panda.png") ,},]};},
};
</script>

element UI多图片展示相关推荐

实现 element ui 走马灯图片插入与自适应大小
在进行这一模块开发的时候,走马灯组件不知道如何使用,还有大小的自适应.我就用官方给的参考文档来进行修改. 接下来是解决方案: //以下是官网组件代码 <template><el-ca ...
element ui 图片加载失败_解决Element UI - el-image 图片初始化加载失败问题
最近使用elementUI的el-image发现经常会出现加载src失败的情况,问题估计就是e-image的src路径一旦初始化加载失败的话就没有异步刷新,(这个地方需要注意过这个问题的大佬解读下源码 ...
element ui 基本操作
系列文章目录提示:这里可以添加系列文章的所有文章的目录,目录需要自己手动添加例如:第一章 Python 机器学习入门之pandas的使用提示:写完文章后,目录可以自动生成,如何生成可参考右边的帮 ...
在线相册，图片上传，基于 Spring boot vuejs element ui mysql 的项目
最近想学关于vuejs 和 element ui ,趁着工作之余开发了一个在线相册的项目,功能有注册,登录,预览,各种中心,图片上传,我的资源,图片编辑等,,在此做一个分享吧. Git 地址 :ht ...
结合axios(formdata)+vue-cropper+element ui实现头像图片剪切上传
萌新用vue + axios + formdata 上传文件的爬坑之路 https://blog.csdn.net/qq_41688165/article/details/80834842 结合vue ...
Vue Element UI Image Carousel 在滚动的图片上实现文本的缩略显示与全部显示
文章目录前言实现效果关键代码源码下载参考文献前言基于 Vue 使用 element ui 的 carousel 和 image 实现图片的滚动,以及文字在图片上缩略显示和全部显示. 实现 ...
element UI上传图片Upload组件使用图片转base64和fale文件处理 formdata数据格式的应用
element UI上传图片Upload组件使用 & 图片转base64和fale文件处理 & formdata数据格式的应用 1.element UI上传图片Upload组件使用效 ...
element ui图片上传-实现单图上传
1. 业务需求: 需要把多图上传的效果改造成为单图上传的效果 2. 效果展示 (1) 原来官网效果: https://element.eleme.cn/2.0/#/zh-CN/component/up ...
Element UI中Steps 步骤条description描述换行展示
突然要求加了个显示字段,之前的代码只能显示一行,于是乎找到了解决办法,代码如下:其中的属性自行到官网查看释义吧:Element UI官网传送门 <el-table><!-- 可展开的 ...

element UI多图片展示

element UI多图片展示相关推荐

最新文章

热门文章