Vue 如何将两个 Dom 节点进行对对齐，在前端页面中如何快速的对两个节点元素进行对齐操作，最简单的方式就是使用 Postion：Relative 加 Absolute 实现两个元素的相对位置。今天使用 dom-align 库实现节点对齐，实现以下效果，实现的方法很多，例如使用 Grid，本文使用 dom-align。
安装 dom-align
npm i dom-align
使用 dom-align 时需要配置节点之间的相对位置：
- target: 被对齐的目标元素，通常是要对齐的参考元素。
- align: 当前元素相对于目标元素的对齐方式。
- offset: 当前元素相对于目标元素的偏移量。
- overflow: 处理当元素位置超出视口时的情况。
- useCssTransform: 是否使用 CSS transform 属性来定位元素，还是使用传统的 top / left 定位。
例如
align: {points: ['tc', 'bc'], // 当前元素顶部居中对齐目标元素底部居中offset: [0, 8], // 当前元素距离目标元素 8pxoverflow: {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 的位置修改并移动。
