前言

因为公司业务需要,做一个宫格转换,并且选中宫格 或者拖动颜色能填充的,拿Vue3做个demo熟悉一下

宫格转换实现效果

核心思路

因为业务不需要兼容IE,就直接采用了grid布局进行分配,点击切换grid布局即可

核心代码

//宫格转换
const changeGrid = (item) => {
  const { id } = item;
  let map = new Map([
    [
      "0",
      {
        //宫格class
        class: "grid-two-two",
        //格子数量
        length: 4,
      },
    ],
    [      "1",      {        class: "gird-three-three",        length: 9,      },    ],
    [      "2",      {        class: "gird-four-four",        length: 16,      },    ],
    [      "3",      {        class: "gird-five-five",        length: 25,      },    ],
    ....
    //若干宫格条件
   
  ]);
  state.gridList = initList(map.get(`${id}`).length);
  state.gridMode = map.get(`${id}`).class;
  nextTick(() => {
    initPos(domlist);
  });
};
 //scss 代码
.grid-two-two {
  grid-template-columns: repeat(2, 50%);
  grid-template-rows: repeat(2, 50%);
}
.gird-three-three {
  grid-template-columns: repeat(3, 33.3%);
  grid-template-rows: repeat(3, 33.3%);
}
.gird-four-four {
  grid-template-columns: repeat(4, 25%);
  grid-template-rows: repeat(4, 25%);
}

拖动颜色填充格子实现效果

核心思路

1.页面加载时,获取各个小格子的位置(x,y);
2.计算出每个小格子的范围(x+小格子的宽度,y+小格子高度);
3.鼠标松开后的落点位置(mouseX,mouseY);
4.判断鼠标落点距离是否在小格子范围内即可;

核心代码

//初始化格子dom
const initPos = (doms) => {
  state.posList = [];
  let domList = toRaw(doms.value);
  domList = domList.filter((item)=>item)
  domList.forEach((item) => {
      const { x, y, width, height } = item.getBoundingClientRect();
      //计算每个小格子范围
      state.posList.push({
        maxXRange: `${x + width}`,
        minXRange: `${x}`,
        maxYRange: `${y + height}`,
        minYRange: `${y}`,
      });
  });
};
//判断鼠标落点位置并返回相应格子的索引值
const findIndex = (x, y, arr) => {
  let res;
  arr.forEach((item, index) => {
    const { maxXRange, maxYRange, minXRange, minYRange } = item;
    if (x < maxXRange && x > minXRange && y < maxYRange && y > minYRange) {
      res = index;
    }
  });
  return res;
};
//鼠标松开后,获取相应的颜色
const handleDragEnd = (e, item) => {
  const { x, y } = e;
  let posList = toRaw(state.posList);
  state.selectId = findIndex(x, y, posList);
  selectColor(item);
};

//选择颜色
const selectColor = (color) => {
  const id = state.selectId;
  state.gridList.forEach((item) => {
    if (item.id == id) {
      item.color = color;
    }
  });
};

源码链接

github.com/chongchongL…

效果体验

www.lintools.top/ 宫格切换模块