如何利用 Vue 的自定义指令和 `MutationObserver`，实现一个响应式网格布局，支持列宽拖拽和自动重排？ - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位前端的掘友们，大家好！我是你们的老朋友，今天咱们来聊点刺激的，一起手撸一个响应式网格布局，这玩意儿可不是简简单单的 CSS Grid，而是要加上列宽拖拽和自动重排的骚操作！

咱们的目标是：用 Vue 的自定义指令结合 MutationObserver，打造一个灵活、可配置、用户体验爆棚的网格系统。

第一部分：热身运动 – 需求分析与技术选型

在开始之前，先明确一下我们的需求：

响应式布局： 网格列数能根据屏幕尺寸自动调整。
列宽拖拽： 用户可以通过拖拽列之间的分隔线来改变列宽。
自动重排： 当列宽改变时，网格项能自动重新排列，保持布局的完整性。
可配置性： 允许开发者自定义网格的列数、间距等参数。

技术选型方面：

Vue.js： 这是咱们的主角，用于构建用户界面和管理状态。
自定义指令： Vue 的强大特性，用于直接操作 DOM 元素，实现拖拽功能。
MutationObserver： 用于监听 DOM 变化，实现自动重排功能。
CSS Grid： 强大的 CSS 布局方案，用于创建网格结构。

第二部分：撸起袖子 – 代码实现

创建 Vue 组件：

首先，创建一个 Vue 组件，用于渲染网格。

<template>
  <div class="grid-container" ref="gridContainer">
    <div
      v-for="(item, index) in items"
      :key="index"
      class="grid-item"
      :style="{ gridColumnStart: item.colStart, gridColumnEnd: item.colEnd, gridRowStart: item.rowStart, gridRowEnd: item.rowEnd }"
    >
      {{ item.content }}
    </div>
    <div
      v-for="(col, index) in columnLines"
      :key="'column-line-' + index"
      class="column-line"
      :style="{ left: col.position + 'px' }"
      v-grid-resizer="col"
    ></div>
  </div>
</template>

<script>
export default {
  props: {
    items: {
      type: Array,
      required: true,
    },
    columns: {
      type: Number,
      default: 3, // 默认3列
    },
    gap: {
      type: Number,
      default: 10, // 默认间距10px
    },
  },
  data() {
    return {
      columnLines: [], // 存储列分隔线的位置信息
      containerWidth: 0, // 容器宽度
    };
  },
  watch: {
    columns: 'updateColumns',
    gap: 'updateColumns',
    items: 'updateGridItemPlacement', // 监听items变化
  },
  mounted() {
    this.updateColumns();
    this.updateGridItemPlacement();
    window.addEventListener('resize', this.handleResize);
    this.handleResize(); // 初始化时获取容器宽度
  },
  beforeUnmount() {
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    handleResize() {
      this.containerWidth = this.$refs.gridContainer.offsetWidth;
      this.updateColumns();
      this.updateGridItemPlacement();
    },
    updateColumns() {
      // 根据容器宽度和列数计算列分隔线的位置
      const columnWidth = (this.containerWidth - (this.columns - 1) * this.gap) / this.columns;
      this.columnLines = [];
      for (let i = 1; i < this.columns; i++) {
        let position = i * columnWidth + (i - 1) * this.gap;
        this.columnLines.push({
          index: i,
          position: position,
          initialPosition: position,
        });
      }
    },
    updateGridItemPlacement() {
      // 负责计算每个item在网格中的位置 (gridColumnStart, gridColumnEnd, gridRowStart, gridRowEnd)
      // 这里需要根据items的特性和需求来进行具体的计算逻辑
      // 可以根据items的宽度、高度等属性来确定它们在网格中的位置
      // 简化的例子，假设每个item占据一列一行
      let col = 1;
      let row = 1;
      this.items.forEach((item) => {
        item.colStart = col;
        item.colEnd = col + 1;
        item.rowStart = row;
        item.rowEnd = row + 1;
        col++;
        if (col > this.columns) {
          col = 1;
          row++;
        }
      });
    },
  },
};
</script>

<style scoped>
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* 自动填充，最小宽度200px */
  grid-gap: v-bind(gap + 'px'); /* 使用 v-bind 动态设置间距 */
  width: 100%;
  height: 400px;
  border: 1px solid #ccc;
  position: relative;
}

.grid-item {
  background-color: #f0f0f0;
  border: 1px solid #ddd;
  padding: 10px;
  text-align: center;
}

.column-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 5px;
  background-color: rgba(0, 0, 0, 0.2);
  cursor: ew-resize;
  z-index: 10;
}
</style>

创建自定义指令 v-grid-resizer：

这个指令负责处理列宽拖拽的逻辑。

// directives/grid-resizer.js
export default {
  mounted(el, binding) {
    let startX = 0;
    let initialWidth = 0;
    let originalColumnLines = JSON.parse(JSON.stringify(binding.value)); // 复制一份初始值

    const handleMouseDown = (e) => {
      startX = e.clientX;
      initialWidth = el.offsetWidth;
      originalColumnLines = JSON.parse(JSON.stringify(binding.value));

      document.addEventListener('mousemove', handleMouseMove);
      document.addEventListener('mouseup', handleMouseUp);
    };

    const handleMouseMove = (e) => {
      const deltaX = e.clientX - startX;
      const newPosition = originalColumnLines.position + deltaX;

      // 调整列分隔线的位置
      binding.value.position = newPosition;
      el.style.left = newPosition + 'px';

      // 触发父组件更新
      el.dispatchEvent(new CustomEvent('column-resize', { bubbles: true })); // 向上冒泡事件
    };

    const handleMouseUp = () => {
      document.removeEventListener('mousemove', handleMouseMove);
      document.removeEventListener('mouseup', handleMouseUp);
    };

    el.addEventListener('mousedown', handleMouseDown);

    // 指令卸载时移除事件监听
    el._gridResizerCleanup = () => {
      el.removeEventListener('mousedown', handleMouseDown);
      document.removeEventListener('mousemove', handleMouseMove);
      document.removeEventListener('mouseup', handleMouseUp);
    };
  },
  beforeUnmount(el) {
    if (el._gridResizerCleanup) {
      el._gridResizerCleanup();
    }
  },
};

注册指令：

在你的 Vue 应用中注册这个指令。

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import gridResizer from './directives/grid-resizer';

const app = createApp(App);
app.directive('grid-resizer', gridResizer);
app.mount('#app');

使用 MutationObserver（可选）：

如果你需要监听网格容器的子元素变化（例如添加、删除网格项），可以使用 MutationObserver。但是在这个例子中，我们通过props传递items，监听props的变化来重新计算布局。

// 在 Vue 组件的 mounted 钩子中
mounted() {
  this.updateColumns();
  this.updateGridItemPlacement();

  // ... 其他代码

  const observer = new MutationObserver((mutations) => {
    // 当网格容器的子元素发生变化时，重新计算布局
    this.updateGridItemPlacement();
  });

  observer.observe(this.$refs.gridContainer, {
    childList: true,
    subtree: true,
  });

  // 在 beforeUnmount 钩子中
  beforeUnmount() {
    // ... 其他代码
    observer.disconnect();
  }
}

第三部分：代码解释

grid-container： 这是网格的容器，使用了 display: grid 来创建网格布局。grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) 实现了响应式列数，minmax(200px, 1fr) 表示每列最小宽度为 200px，最大宽度为 1fr（剩余空间）。grid-gap 设置了列之间的间距。
grid-item： 这是网格中的每个项，通过 grid-column-start、grid-column-end、grid-row-start 和 grid-row-end 属性来指定其在网格中的位置。
column-line： 这是列之间的分隔线，通过绝对定位将其放置在列之间。cursor: ew-resize 设置了鼠标悬停时的光标样式，表明可以水平拖拽。v-grid-resizer 指令负责处理拖拽逻辑。
v-grid-resizer 指令： 这个指令监听了 mousedown 事件，当鼠标按下时，记录起始位置和元素的初始宽度。然后，监听 mousemove 事件，计算鼠标移动的距离，并相应地改变列分隔线的位置。最后，监听 mouseup 事件，移除 mousemove 和 mouseup 事件监听器。
updateColumns 方法： 这个方法根据容器宽度和列数计算列分隔线的位置。它会动态地更新 columnLines 数组，该数组存储了每个列分隔线的位置信息。
updateGridItemPlacement 方法： 这个方法负责计算每个网格项在网格中的位置。它会根据网格项的宽度、高度等属性来确定它们在网格中的 grid-column-start、grid-column-end、grid-row-start 和 grid-row-end 属性。
MutationObserver（可选）： 这个 API 用于监听 DOM 变化。当网格容器的子元素发生变化时，MutationObserver 会触发回调函数，我们可以在回调函数中重新计算布局。

第四部分：运行与调试

引入组件： 在你的父组件中引入并使用这个网格组件。
传递数据： 向网格组件传递 items、columns 和 gap props。
运行应用： 启动你的 Vue 应用，看看效果如何！
调试： 如果遇到问题，可以使用 Vue Devtools 来检查组件的状态，或者使用浏览器的开发者工具来检查 DOM 结构和 CSS 样式。

第五部分：优化与扩展

性能优化： 对于大型网格，频繁的 DOM 操作可能会影响性能。可以考虑使用虚拟 DOM 技术来优化性能。
拖拽优化： 可以添加拖拽的限制，例如限制列宽的最小值和最大值。
持久化： 可以将列宽信息存储在 localStorage 中，以便下次加载时恢复之前的布局。
更多功能： 可以添加更多的功能，例如网格项的拖拽排序、网格项的尺寸调整等。

第六部分：总结

通过 Vue 的自定义指令和 MutationObserver，我们成功实现了一个响应式网格布局，支持列宽拖拽和自动重排。这个例子展示了 Vue 的强大功能和灵活性，以及如何使用 JavaScript API 来操作 DOM 元素。

希望这次讲座对你有所帮助！记住，实践是检验真理的唯一标准，赶紧动手试试吧！

功能	实现方式	优点	缺点
响应式布局	CSS Grid 的 `repeat(auto-fill, minmax())`	简单易用，自动调整列数	灵活性有限，难以实现复杂的布局
列宽拖拽	Vue 自定义指令 + 事件监听	灵活可控，可以自定义拖拽逻辑	需要手动操作 DOM，性能可能受到影响
自动重排	`MutationObserver` (或监听数据变化)	实时监听 DOM 变化，自动更新布局	可能会造成频繁的 DOM 操作，影响性能
可配置性	Vue 组件的 props	方便配置，可以自定义列数、间距等参数	需要在父组件中传递数据，增加了组件之间的耦合性
性能优化	虚拟 DOM、节流、防抖	提高应用性能，减少不必要的 DOM 操作	增加了代码的复杂性
持久化存储	localStorage、cookie	保存用户设置，下次加载时恢复之前的布局	需要处理数据存储和读取的逻辑，存在安全风险
功能扩展	Vue 组件 + JavaScript API	可以添加更多的功能，例如网格项的拖拽排序、网格项的尺寸调整等	增加了代码的复杂性，需要仔细设计和测试

希望这个表格能帮助你更好地理解这个项目的各个方面。各位，下次再见！

发表回复 取消回复

发表回复取消回复