蚂蚁面试题 Vue如何实现被框选方块变色?(三)#程序员

蚂蚁面试题：Vue实现被框选方块变色(三)。

最终的效果给大家演示一遍：框选。首先得实现框选，框选住了要改变颜色。比如这样框选：框22变颜色了，全框全变颜色。这一次来做第二部分改变颜色。这次想要实现的就是在框选范围里面的小方块就需要进行改变颜色。

首先在一进入页面的时候就需要获取到每个小方块所占的x轴、y轴在哪里？就需要去分析一下小方块的x轴是不是在框选的x轴。需要去看一下小方块的left，它是不是大于框选的left值？并且框选的left值加上框选的框的大小是不是要大于小方块的left值，加上小方块的宽度大小就相当于点位要大于这个点位，这样就相当于小方块被框在里面了。

同时需要去考虑一下y轴的操作，这样就可以去判定小方块是否在框选内了。首先来做一个样式的操作：如果class被选中了，就需要做一个选中操作。如果被选中了就需要去改变一下颜色。这个颜色需要去改变一下，要把它改成绿色。

然后要在一开始去获取小方块的left跟top值，需要去获取dom元素。这个时候就需要在起点的时候去获取item，它的位置position。在页面加载的时候就需要去获取一下。前面list里面只有id跟是否选中？这里要添加一些新的信息。

首先要对list进行改动，这个时候需要去获取item的dom元素。

·然后就需要给它进行赋值，vindo把list里面要重新设置left，top宽高。首先获取一下等于item dum的元素的，得获取元素。等获取到之后需要重新进行赋值。这时候获取到了，但是还没有选中信息对不对？选中信息是不是得判定一下？在mousemove里面，要在这个里面对它进行改变。

·ctrl 点、list 点、for each，因为list里面每一个select都是有这个属性的，所以根据刚才说的这里写错了，这里是item。这时候来框选一下跟刚才一样，需要去比对它的开始起点和方块的left和top值对不对？在这里判定一下，如果小方块的left值大于开始起点left，也就是说框选的lef对不对？小方块的left值加上小方块的宽度要小于当前的clientX，相当于最后框选的位置，相当于这里是clientX，并且需要去考虑top，这里帮写好了。

·这个时候再去看一下，当框选中的时候这两个就已经在框选范围内了，这个时候发现反选的时候没有用，有没有发现只能正着选，反着选不行？其实根本原因在这里。这里不应该取rrtX，应该取left加上宽度。下面也是一样，top加上height。

为什么要这么写？因为会发现，当框选的时候它的clientX在这儿，对不对？如果反选，这个时候的clieniX在这儿，对不对？这时候需要用left跟width进行相加来进行比对才行，相当于用开始起点加上宽度就等于点的位置，这样就没有问题了。

来试一下，正宽选反框选都是没有问题的。这样的一个框选面试题就完成了，其实这个操作，在很多的业务过程中都会出现。比如说像做一些低代码的时候进行框选的操作，或者是表格里面有一些框选操作的时候都会用到这个基础案例。

所以虽然说这个看起来思路非常简单，但实际写起来还是有很多细节需要去考虑的。大家感兴趣的话，也可以自己去尝试实现一下。完整源码看我简介自取。