一、安装zj-layout
npm i zj-layout
二、引入
components:{
ZjLayout: () => import('zj-layout')
},
三、使用(小程序)
<template>
<view class="home-page">
<!-- config:配置 debug:开启调试模式 -->
<zj-layout class="home-layout" :config="homeConfig" debug>
<!-- 插槽对应配置中的插槽 -->
<template v-slot:top>
<com-top-bar/>
</template>
<template v-slot:body>
<com-body/>
</template>
</zj-layout>
<!-- <home-wrapper></home-wrapper> -->
</view>
</template>
<script>
export default {
components:{
ZjLayout: () => import('zj-layout'),
ComTopBar: () => import('@/pages/home/com-top-bar.vue'),
ComBody: () => import('@/pages/home/com-body.vue'),
},
data: () => ({
homeConfig:{
direction: 'column', // 上下布局
children: [
{
slot: 'top', // 插槽的名称
class: 'top',
},
{
slot: 'body', // 插槽的名称
direction: 'column',
},
]
}
})
}
</script>
效果:
![](https://img-blog.csdnimg.cn/img_convert/5a61b002c22a4ceb89e8047b2842cede.png)
注意: 配置里面的类需要/deep/ 进去修改