关键词:
使用过elementUI组件库中的Image组件基本都知道,其组件会自带一个图片预览功能,仅需要通过preview-src-list
传入需要预览的图片url列表即可实现点击预览。
博主使用了此功能,进行数组的循环渲染,具体渲染代码如下:
<div
class="img-wrap"
v-for="(item, index) in baseboardList"
:key="index"
>
<el-image
:src="item.src"
:preview-src-list="baseboardPreviewList"
>
</el-image>
<div
class="icon-wrap"
@click="handleClickSelectBaseboard(item.src, item.id)"
>
<i class="el-icon-check"></i>
</div>
</div>
其中baseboardList
是一个包含了图片id以及url的列表,用于遍历循环;baseboardPreviewList
是仅包含图片url的列表,用于预览;由于业务需要,需要在循环中包裹一个可供用户选中图片的DOM,即代码中class为icon-wrap
的div元素。
随之而来的问题也显现了,因为v-for
循环会产生多个el-image
组件,这些组件都使用了同一个baseboardPreviewList
用于预览,这样做就会导致一个问题,就是用户无论点击哪一张图片,都会从预览数组的第一张图开始显示,这显然不符合业务需求,如下图所示:
可以非常明显的看到,无论用户点击的是哪一张图片,其预览都会从第一张图片开始。
如何解决?
由于业务需要,只能由外层的div包裹内层的el-image
组件和class
为icon-wrap
的div元素去循环渲染,所以没有办法只是在el-image
组件层面上做循环。
从DOM作为切入点无门,那么就将目光转至数据层,既然所有的el-image
组件都公用了baseboardPreviewList
做预览功能,那么是不是我只要在用户点击图片的时候,将baseboardPreviewList
这个数组做重新排序,以用户点击的图片的url作为新数组的第一项,然后将其后的图片url依次压入新数组,最后再将处在用户点击的图片顺序之前的图片顺序地压入新数组,生成的这个新数组再作为新的预览数组赋值。
可能我说的有点绕,我们干脆直接看代码层。
博主先是在el-image
组件定义了一个点击事件@click="handleClickPreBaseboard(item.src)"
,事件中将用户点击的图片url作为传递参数。
// 点击预览图片事件
handleClickPreBaseboard(src)
let newList = [] // 定义一个新数组
let i = 0 // i用于取用户点击的图片所对应数组的下标
let length = this.baseboardPreviewList.length // 原数组的长度
// 一次some遍历将当前url所对应的下标赋值给i
this.baseboardPreviewList.some((item, index) =>
if (src === item)
newList.push(item) // 同时做第一次push操作(用户当前点击的图片的url)
i = index
)
newList.push(...this.baseboardPreviewList.slice(i + 1, length)) // 压入顺序在当前图片之后的图片url
newList.push(...this.baseboardPreviewList.slice(0, i)) // 压入顺序在当前图片之前的图片url
this.baseboardPreviewList = newList // 重新赋值
在点击事件中,对原预览数组做重新排序操作,使用户点击的图片的url会位于数组的第一项,这样就保证了用户每次点击均是预览当前图片,效果图如下:
总结
其实在没有进行优化之前,博主在本地跑项目的时候,并没有发现这个问题,可是当项目上线了,或者是其他同事在本地运行项目的时候,均会必现这个问题。
博主仔细的研究了代码以及UI库的版本号,均是一致,但是博主本地无论优化前还是优化后都没有这个问题,这就十分的诡异,暂时没有头绪,如果有大佬清楚的望指点迷津!
按需引入饿了么ui组件
参考技术A第一步安装第二部在main.js中引入样式第三步安装第四步看情况,是否在全局引入(比如一些很多模块都要用到的Button,可在main.js中全局引入)有的组件在项目中只要用到一次,那只需在要用到此组件的模块中单独引入 查看详情
:element-ui组件库
...件库Mint组件库Cube组件库1.2PC端常用UI组件库ElementUI组件库饿了么搭建后台管理系统[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-otmVfaMK-1655452008388)(assets/image-20220302172523798.p 查看详情
饿了么element-ui的图标设置大小
给element-ui的图标设置大小,其实就是给此组件或其父组件设置字体大小scss样式:只需要给父盒子设置字体大小 组件样式: 查看详情
如何修改饿了么ui的组件样式为自定义的样式
参考技术A1gitclonegit@github.com:b1412/jfinal.git2gitcheck-bmyfeature从当前分支(master)切出一个新分支myfeature。3修改代码之后gitcommit-a-m"注释"修改的代码就已经提交到本地仓库。4gitpushoriginmyfeature:myfeature将 查看详情
:element-ui组件库
...件库Mint组件库Cube组件库1.2PC端常用UI组件库ElementUI组件库饿了么搭建后台管理系统[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-otmVfaMK-1655452008388)(assets/image-20220302172523798.png)]IViewUI组件库项目案例... 查看详情
vue中使用element-ui的内置组件实现图片预览全局调用功能el-image-viewer(代码片段)
1.先通过element-ui引入它内置图片预览组件//preview.vue<template><el-image-viewerv-if="showPreview":urlList="previewImages":on-close="closeViewer"></el-image-viewer& 查看详情
饿了么elementui之upload组件图片上传原创(代码片段)
图片文件换汤不换药,只要注意前端的写法即可1.饿了么组件可以利用http-request的属性对上传进行自定义:http-request="uploadFile"2.设置文件FormData对象传入请求constformdata=newFormData();constfile=params.file;formdata.append("file",file);3.全部代码<... 查看详情
element-ui中使用图片查看器(el-image-viewer)预览图片(代码片段)
...ement-ui版本2.11.1及以上Element-ui官方文档中有大图预览相关组件传送门:Element-ui图片组件,但我们不想通过使用Image组件的方式(先默认显示预览图片,再通过点击图片实现大图预览查看),又想实现直接预... 查看详情
如何将后台的树形数据、倒序的展示到前台vue+饿了么ui组件中的面包屑里面呢
这个图片是树形数据、想倒序的展示到面包屑里面、求大神参考技术A先处理数据顺序在渲染组件即可1、先使用js对数据进行排序,按照倒序的排列好之后在把数据给到elementUI的组件中渲染即可2、js中最基本的数组排序方法是sort(... 查看详情
(尚038)vue_ui组件库(代码片段)
....github.io/#!/zh-cn(注意:地址失效,可以百度mint-ui文档)b.说明:饿了么开源的基于vue的移动端UI组件库2)Elmenta.主页:http://element-cn.eleme.io/#/zh-CNb.说明:饿了么开源的基于vue的PC端UI组件库 2.使用MintUI1)下载 npminstall--savemint-ui ... 查看详情
skecth怎么把饿了么组件变成自己的组件
参考技术A打开你已经做好的SU模型,鼠标点击确定之后即可将物体设置成组件。打开你已经做好的SU模型。我们以一个简单的SU模型为例。我们的组件在这里:窗口-组件。打开之后你会看到一个对话框,其中那些组件就是自带的... 查看详情
饿了么ui下拉框禁用
1饿了么ui下拉框可以禁用。2通常可以通过设置下拉框的属性或者使用JavaScript代码来禁用下拉框。禁用下拉框可以防止用户进行选择或者输入操作,可以用于一些特定的场景,比如下拉框的值需要根据其他条件进行计算或者筛选... 查看详情
饿了么vue组件开发2018-09-26
参考技术A1.header组件开发总结 1)使用classMap设置优惠活动项 2)设置了公共样式自定义属性:border-1px($color)解决移动端1px问题 bg-image($url)解决背景图片在不同设备像素比之下的大小2.header弹出层组件开发... 查看详情
饿了么基于vue2.0的通用组件开发之路(分享会记录)
Element:一套通用组件库的开发之路Element是由饿了么UED设计、饿了么大前端开发的一套基于Vue2.0的桌面端组件库。今天我们要分享的就是开发Element的一些心得。官网:http://element.eleme.io/#/github:https://github.com/ElemeFE/element ... 查看详情
vue饿了么项目-header组件开发
1.数据传递的理解在App.vue中用到了header组件,首先注册组件components:{‘v-header‘:header}然后才能引用<v-header:seller="seller"></v-header>:seller="seller"的意思是将seller对象传递给v-header中的seller,而v-header中从哪里获得seller呢?通... 查看详情
vue的饿了么写作感受
1.在重复使用的组件中,要把重复使用组件的需要在数据的请求的地方设置为在富组件中,通过props船只到子组件,这样在重复调用次组件的时候既可以很好的避免组件的值的冲突2.getData的使用,把所有的axios请求都在getData中使... 查看详情
基于vue来开发一个仿饿了么的外卖商城(代码片段)
一、抽出头部作为一个组件,在底部导航的时候可以相应的显示不同的标题技术点:使用slot进行组件间的通信;父组件给子组件传值(子组件里面通过props接收父组件传过来的数据)查看链接:https://blog.csdn.net/sinat_17775997/article/... 查看详情
vueelement-ui组件
一.UI组件目的:提高开发效率,别人提供好一切,拿过来直接用饿了么团队开源一个基于vue组件库Element-UI==>pc端文档: http://element-cn.eleme.io/#/zh-CN/component/installation二.安装模板$vueinitwebpackelement-demo1.安装element-ui$npminstallelement-ui 查看详情