Vue 中实现节点对齐

Vue 如何将两个 Dom 节点进行对对齐，在前端页面中如何快速的对两个节点元素进行对齐操作，最简单的方式就是使用 Postion：Relative 加 Absolute 实现两个元素的相对位置。今天使用 dom-align 库实现节点对齐，实现以下效果，实现的方法很多，例如使用 Grid，本文使用 dom-align。

安装 dom-align

npm i dom-align

使用 dom-align 时需要配置节点之间的相对位置：

1. target: 被对齐的目标元素，通常是要对齐的参考元素。
2. align: 当前元素相对于目标元素的对齐方式。
3. offset: 当前元素相对于目标元素的偏移量。
4. overflow: 处理当元素位置超出视口时的情况。
5. useCssTransform: 是否使用 CSS transform 属性来定位元素，还是使用传统的 top / left 定位。

例如

align: {
  points: ['tc', 'bc'],  // 当前元素顶部居中对齐目标元素底部居中
  offset: [0, 8],         // 当前元素距离目标元素 8px
  overflow: {
    adjustX: true,        // 溢出时调整 X 轴位置
    adjustY: true,        // 溢出时调整 Y 轴位置
  }
}
Points 主要包含一下配置
['tl', 'br']: 将当前元素的 左上角 对齐到目标元素的 右下角。
['tc', 'bc']: 将当前元素的 顶部居中 对齐到目标元素的 底部居中。
['bl', 'tr']: 将当前元素的 左下角 对齐到目标元素的 右上角。
['tr', 'tl']: 将当前元素的 右上角 对齐到目标元素的 左上角。
['br', 'bl']: 将当前元素的 右下角 对齐到目标元素的 左下角。
['tc', 'tc']: 将当前元素的 顶部居中 对齐到目标元素的 顶部居中。
['cc', 'cc']: 将当前元素的 中心 对齐到目标元素的 中心（通常用于将两个元素在相互之间居中对齐）。

对于上面的需求，元素之间就是A1 的右下对 B1 的左上，代码如下

<script setup lang="ts">
import align from "dom-align";
import { onMounted, ref } from "vue";

const a1 = ref(null);
const b1 = ref(null);
const c1 = ref(null);

onMounted(() => {

  // a1 相对于 b1
align(a1.value, b1.value, {
  points: ['br', 'tl'], 
  useCssTransform: true
});

// c1 先对于 b1
align(c1.value, b1.value, {
  points: ['tl', 'br'], 
  
});
});
</script>

<template>
  <div>
      <div ref="a1" class="container a1">A1</div>
      <div ref="b1" class="container b1">B1</div>
      <div ref="c1" class="container c1">C1</div>
  </div>
</template>
<style scoped>
.a1 {
  background-color: aliceblue;
}
.b1 {
  background-color: beige;
  
}
.c1 {
  background-color: blanchedalmond;
  
}
.container {
  color: black;
  line-height: 200px;
  text-align: center;
  font-size: 20px;
  display: inline-block;
  width: 200px;
  height: 200px;
}
</style>

总结

由于现在都是使用现成的组件库，大多复杂的组件直接使用组件库即可，有的时候可能会遇到一些复杂的效果，元素之间的对齐关系相对复杂，使用 dom-align 库可以轻松的实现组件对齐。dom-align 中两个关键的参数是 source 和 target ， source 会根据相对于 target 的位置修改并移动。