Vue 3 实践：宫格转换与拖动填色

前端

2024-01-15 07:48:24

前言

最近在做项目的时候，需要做一个宫格转换的功能，并且选中宫格或者拖动颜色能填充。由于业务不需要兼容 IE，因此我直接采用了 grid 布局进行分配。

宫格转换实现效果

核心思路

宫格转换的核心思路是使用 CSS 的 grid-template-areas 属性来定义宫格的布局，然后使用 JavaScript 来动态地改变这些布局。

代码实现

首先，我们需要在 HTML 中定义一个 <div> 元素来作为宫格的容器。然后，我们需要使用 grid-template-areas 属性来定义宫格的布局。例如，以下代码定义了一个 3 行 3 列的宫格布局：

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
</div>

接下来，我们需要使用 JavaScript 来动态地改变宫格的布局。我们可以使用 document.querySelector() 方法来选择宫格容器，然后使用 grid-template-areas 属性来设置新的布局。例如，以下代码将宫格布局改为 2 行 2 列：

const gridContainer = document.querySelector('.grid-container');
gridContainer.style.gridTemplateAreas = `
  "1 2"
  "3 4"
`;

拖动填色实现效果

核心思路

拖动填色的核心思路是使用 CSS 的 touch-action 属性来禁止浏览器的默认触摸事件，然后使用 JavaScript 来监听触摸事件并改变宫格的颜色。

代码实现

首先，我们需要在 HTML 中为宫格元素添加 touch-action: none 样式。例如：

<div class="grid-item" touch-action="none">...</div>

接下来，我们需要使用 JavaScript 来监听触摸事件并改变宫格的颜色。我们可以使用 addEventListener() 方法来监听 touchstart 和 touchmove 事件，然后使用 preventDefault() 方法来阻止浏览器的默认触摸事件。例如：

const gridItems = document.querySelectorAll('.grid-item');
gridItems.forEach((item) => {
  item.addEventListener('touchstart', (event) => {
    event.preventDefault();
    item.style.backgroundColor = 'red';
  });

  item.addEventListener('touchmove', (event) => {
    event.preventDefault();
    item.style.backgroundColor = 'red';
  });
});