問(wèn)題說(shuō)明
在使用Element-UI的Container布局容器時(shí)咆霜，我將el-header和el-aside封裝成了組件，導(dǎo)致布局出現(xiàn)問(wèn)題轿塔。
布局.png
官方示例代碼：
<el-container>
<el-header>Header</el-header>
<el-container>
<el-aside width="200px">Aside</el-aside>
<el-main>Main</el-main>
</el-container>
</el-container>
我的代碼：
<el-container class="container">
<v-head></v-head> //這里我封裝成了組件
<el-container class="container">
<v-sidebar></v-sidebar>
<el-main>
<transition name="move" mode="out-in">
<router-view></router-view>
</transition>
</el-main>
</el-container>
</el-container>
出現(xiàn)問(wèn)題的布局如下圖所示特愿，header下方?jīng)]有內(nèi)容了
顯示結(jié)果.png
問(wèn)題排查
查了下官網(wǎng)的文檔仲墨，發(fā)現(xiàn)這樣一項(xiàng)說(shuō)明
官網(wǎng)文檔.png
封裝成組件后，el-container中沒(méi)有了el-footer和el-header揍障，導(dǎo)致子元素排列方向默認(rèn)為horizontal
問(wèn)題解決
在el-container上增加 direction="vertical"屬性
<el-container class="container" direction="vertical">
<v-head></v-head>
<el-container class="container">
<v-sidebar></v-sidebar>
<el-main>
<transition name="move" mode="out-in">
<router-view></router-view>
</transition>
</el-main>
</el-container>
</el-container>
