vue 范围拖选插件

背景：公司需要一个每半小时一个时间段的选择功能，共48个点，效果如下

深色代表选中，浅色代表不选

---

正题：

实现功能：

1、任意格数，只需要编辑json

2、自适应父元素宽度

3、鼠标快速移动流畅响应

4、滑动指示当前信息

需要解决的问题：

1、布局问题，这里直接选择流式布局，flex 菜鸟学习传送

2、如何拖选：鼠标按下开启拖选，鼠标抬起结束拖选，鼠标进入选中（反选）

3、鼠标移动过快，enter事件监听不到：判断当前拖选方向，记录上一次拖选经过的Id，范围选中

源码已上传  打开即用，如果帮到你了，给个星

gitee: https://gitee.com/tomato23132313/range-drag-selection

实现效果：

核心代码：

methods: {
        subenter: function (item) {
          //拖选中子元素
          if (this.isDrop) {
            if (this.lastItemId != item.id) {
              var min = this.lastItemId < item.id ? this.lastItemId : item.id;
              var max = this.lastItemId < item.id ? item.id : this.lastItemId;
              if (this.lastItemId - item.id < 0) {
                //正方向
                for (
                  var i = min;
                  i < Math.abs(this.lastItemId - item.id) + min;
                  i++
                ) {
                  this.subData[i].check = !this.subData[i].check;
                }
              } else {
                //反方向
                for (var i = max - 2; i > min - 2; i--) {
                  this.subData[i].check = !this.subData[i].check;
                }
              }

              this.lastItemId = item.id;
            }
          }
        },
        subdown: function (item) {
          //单个选中子元素
          this.lastItemId = item.id;
          item.check = !item.check;
        },
        boxdown: function () {
          //鼠标按下开始拖选
          this.isDrop = true;
        },
        boxup: function () {
          //鼠标抬起取消拖选
          this.isDrop = false;
        },
        boxleave: function () {
          //当鼠标移出区域块时，视为取消拖选
          this.isDrop = false;
        },