element-ui点击查看大图的方法示例

2024-10-13 15:30:38

element-ui图片（查看大图），可通过 previewSrcList 开启预览大图的功能。

写在element-ui表格中，使用作用域插槽循环图片

<!-- template插槽 -->
<template slot-scope="scope">

	<div class="demo-image__preview">
	 <el-image
	  style="width: 100%; height: 100%"
	  :src="scope.row.pic"
	  :preview-src-list="srcList"
	  >
	 </el-image>
	</div>

</template>

1.此处的div是展示大图的容器，当点击图象时显示出来。
2.srcList是存放大图路径的数组，在获取数据时，通过forEach将图片路径存放到srcList中

data() {
  return {
   data: [], // 所有数据
   srcList: [], //大图
},
mounted(){
	this.$http.get("/data.json").then((res) => {
	  this.data = res.data;
	  this.data.forEach((item) => {
	    this.srcList.push(item.pic);
	  });
	});
}

最终效果：

到此这篇关于element-ui查看大图的方法示例的文章就介绍到这了,更多相关element查看大图内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

vue iview多张图片大图预览、缩放翻转

本文实例为大家分享了vue iview多张图片大图预览,可缩放翻转,供大家参考,具体内容如下先看效果: 完整项目代码地址具体代码如下: <style lang="less"> @import "../advanced-router.less"; </style> <template> <div class="balance-accounts"> <Row class-name="
element-ui点击查看大图的方法示例

element-ui图片(查看大图),可通过 previewSrcList 开启预览大图的功能. 写在element-ui表格中,使用作用域插槽循环图片  <template slot-scope="scope"> <div class="demo-image__preview"> <el-image style="width: 100%; height: 100%"
iOS点击查看大图的动画效果

对于图片来说,除了表情包,几乎都会被点击查看大图.今天就讲解一个查看和收起大图的动画效果,先直接看效果图: 如图所示,最开始是一个小图,点击小图可以查看大图.大图会从小图的位置和大小"弹"出来,同时背景变成半透明的阴影.点击大图或者阴影后,收起大图,同样地弹回到小图去,同时去掉阴影背景,就像是一张图片在伸大缩小一样. 现在看看这是怎么实现的.在思考一个动画的实现方法时,把动画的动作进行分解然后再一个个去思考怎么实现是一个好的习惯,我们稍微分解一下,这个动画在显示大图和收起大图的时候做了
jquery实现鼠标滑过小图查看大图的方法

本文实例讲述了jquery实现鼠标滑过小图查看大图的方法.分享给大家供大家参考.具体实现方法如下: 1. CSS部分: <style type="text/css"> ul{ list-style:none; } li{ float:left; margin-left:10px; } img{ border:#CCCCCC solid 1px; } #max{ position:absolute; display:none; /*隐藏层*/ } </style>
jQuery实现点击查看大图并以弹框的形式居中

jQuery实现点击查看大图并以弹框的形式居中,实现的关键代码如下所示: *{margin:0;padding:0;} .tab_bg{display:none;width:100%;height:100%;background:#282829;z-index:99;position:absolute;} .tab_img{width:100px;height:100px;margin:20px;} .tab_img img{width:100%;height:100%;} .bigImg{di
JavaScript编写点击查看大图的页面半透明遮罩层效果实例

这个效果用的很频繁,经常都会有人问我这个问题,所以要把它写成文章.下次再有人问就直接把这篇文章的URL丢出去就好了.这个效果很简单所以我就不做太多说明了,具体的看看代码注释就会明白.下面就是全部代码,复制到HTML中就可以运行的. <!DOCTYPE html> <style> #mask { position:fixed;width:100%; top:0px;left:0px; _position:absolute; _top:expression(documentElemen
vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例

如果是已经有点经验的同学,可以直接看下面这个函数,应该就能明白怎么回事,新手可以看下面的详细教程. 函数: handleEdit: function (index, row) { this.editFormVisible = true; this.editForm = Object.assign({}, row); } 详细教程: 1.首先,做一个表格,用于显示信息:代码如下: <el-table :data="users" highlight-current-row v-loa
react-native中ListView组件点击跳转的方法示例

前言在上一篇我们实现了NavigatorIOS与ListView结合使用的方法,那么这篇文章介绍一下ListView里点击跳转到新视图的方法,话不多说了,来一起看看详细的介绍吧. 先看效果用法 NewsList.js _onPress(rowData) { this.props.navigator.push({ title: rowData, component: CNodeJSList, passProps: { name: rowData, } }) } 说明使用 this.prop
Android之高效加载大图的方法示例

加载大图到内存是一件令人头疼的事情.因为大图的原因,我们会在Crash报告中看到OOM(内存不足).Android的内存有限,这一点我们应该心里有数. stackoverflow上有许多相关问题的回答,当你碰到oom时,可以直接跳过本文,粘贴复制答案即可.但是对于其他人来说,我想告诉你们一些加载大图的知识和原理. 加载Bitmap到内存 so easy.你所需要做的就是使用BitmapFactory解码你的图片. Bitmap bitmap = BitmapFactory.decodeResou
微信小程序实现点击空白隐藏的方法示例

怎样实现jq中的slideUp或者slideDown这种动画效果呢,我的思路是用css3的transform: translateY()属性,给需要动画的元素添加上一个动画class. 先上效果图: 1.蒙层的结构:  <view class='list-fix' wx:if="{{mengShow}}" bindtap='outbtn'> //mengShow是蒙层是否显示的标志,然后蒙层绑定outbtn的点击事件 <view
在Android中高效的加载大图的方法示例

将大图加载到内存中总是令人痛苦,因为我们经常会在应用的崩溃报告中看到OOM(Out Of Memory)的bug.大家都知道,Android系统的内存有限.我们必须牢记这一点. stackoverflow上有很多关于大图加载的问题,当你的应用程序遇到OOM的时候,你可以选择直接复制粘贴其中的答案来解决这个问题.因此,你完全可以略过本篇文章,但我想介绍一些加载大图的基础知识及其实际工作的原理. 我只想解释图片解码背后的逻辑.我建议你使用Picasso或Glide来加载图片.没有必要重新发明轮子.

element-ui点击查看大图的方法示例

相关推荐

随机推荐