【4】Vite+Vue3左右容器中相同属性的元素内容自动对齐

**Vite + Vue3: 左右容器中相同属性的元素内容自动对齐**

在前端开发中，经常会遇到需要左右两边容器中相同属性的元素内容自动对齐的问题。例如，在一个博客页面中，左侧有一个列表，右侧有一个文章内容区域，我们希望列表中的项目和文章内容区域的文本能够垂直对齐。

在传统的 CSS 布局中，这个问题可以通过使用 Flexbox 或 Grid 来解决。但是，如果我们使用 Vite + Vue3 这样的前端框架，则需要找到一种更合适的解决方案。

**解决方案**

我们的解决方案是使用 Vite + Vue3 的组件化特性，创建一个自定义组件来实现左右容器中相同属性的元素内容自动对齐。我们将这个组件称为 `AutoAlign`。

### AutoAlign 组件

html<template>
 <div class="auto-align">
 <slot name="left"></slot>
 <slot name="right"></slot>
 </div>
</template>

<script>
export default {
 name: 'AutoAlign',
 props: {},
 data() {
 return {}
 },
 mounted() {
 this.init()
 },
 methods: {
 init() {
 const leftElements = document.querySelectorAll('.auto-align .left');
 const rightElements = document.querySelectorAll('.auto-align .right');

 leftElements.forEach((element, index) => {
 const height = element.offsetHeight;
 const top = element.offsetTop;

 rightElements[index].style.top = `${top}px`;
 rightElements[index].style.height = `${height}px`;
 });
 }
 },
 watch: {}
}
</script>

<style scoped>
.auto-align {
 display: flex;
}

.left, .right {
 width:50%;
}

.left {
 background-color: #f0f0f0;
}

.right {
 padding:20px;
}
</style>

html<template>
 <div class="container">
 <AutoAlign>
 <template v-slot:left>
 <ul class="left">
 <li>项目一</li>
 <li>项目二</li>
 <li>项目三</li>
 </ul>
 </template>

 <template v-slot:right>
 <div class="right">
 <h2>文章内容</h2>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet nulla auctor, vestibulum magna sed, convallis ex.</p>
 </div>
 </template>
 </AutoAlign>
 </div>
</template>

<script>
import AutoAlign from './AutoAlign.vue'

export default {
 name: 'App',
 components: { AutoAlign },
 data() {
 return {}
 }
}
</script>

<style scoped>
.container {
 max-width:1200px;
 margin:40px auto;
}

.left, .right {
 box-sizing: border-box;
}
</style>