使用vue做一个时间段得连选，鼠标滑过将时间都选上

Question

请问仿这个做有现成得组件吗

Answer 1

似乎没见过这种类型的组件，因为它已经耦合一定的业务了

实现起来的话，其实不难的，大体思路如下：

• 首先可以用表格或者 div 外加各种样式搞一个静态的组件出来
• 拖拽操作通过 mouseup/mousemove/mousedown 事件模型实现，高亮通过 css 实现即可
• 中间的小格，通过一个二维数组来保存，同时储存其坐标，之后在 mousedown 中记录起点坐标，在 mouseup 中记录终点坐标，在 mousemove 中不断计算已选的坐标范围，并更新高亮的 css 类名
• 然后根据这个坐标范围解析出时间范围即可

Answer 2

大佬 我们公司和你的业务一样 请问解决了吗

Answer 3

这不就是钻展投放的时候选择时间嘛，直接把js 拷贝出来改一下就好了

Answer 4

给行添加移出mouseleave事件 按下mousedown事件 按起mouseup事件
给td添加移入mouseenter

触发mousedown，则代表开始拖动选中单元格，mouseenter代表按下时拖过的单元格，mouseup和mouseleave代表结束

Answer 5

组件实现了吗？

Answer 6

大佬，求一份代码