内置多种布局方式的组件，主要用于主页结构

基本用法

<template>
    <yb-layout-pro
        :layout="layout"
        :onelyBody="onelyBody"
        :collapse.sync="collapsed"
        style="height:600px;border:1px solid #409EFF;"
    >
    </yb-layout-pro>
</template>
<script>
    export default {
        data() {
            return {
                collapsed: false,
                onelyBody: false,
                layout: 'tlr',
            };
        },
    };
</script>

显示 复制 复制

切换布局

使用yb-theme-select控制布局变化

主题面板

<template>
    <div>
        <div style="margin-bottom:10px">
            <el-button @click="openThemePanel">切换布局</el-button>
        </div>
        <yb-layout-pro
            :layout="theme.layout"
            :onelyBody="onelyBody"
            :collapse.sync="collapsed"
            style="height:600px;border:1px solid #409EFF;"
        >
        </yb-layout-pro>
        <el-drawer :visible.sync="viewerDrawer" size="30%" append-to-body>
            <template v-slot:title>
                <span style="margin-left: 10px">主题面板</span>
            </template>
            <yb-theme-select v-model="theme" />
        </el-drawer>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                collapsed: false,
                onelyBody: false,
                viewerDrawer: false,
                theme: {
                    primaryColor: '#CD8A26',
                    layout: 'ltr-dark',
                },
            };
        },
        methods: {
            openThemePanel() {
                this.viewerDrawer = true;
            },
        },
    };
</script>

显示 复制 复制

props

参数	说明	类型	可选值	默认值
sidebarWidth	左侧栏的宽度	string	-	"240px"
sideFooterHeight	左侧栏底部的高度	string	-	"40px"
headerHeight	顶部栏的高度	string	-	"50px"
layout	布局类型	string	"tlr"|"tlr-light"|"ltr"|"ltr-light"|"ltr-dark"|"ttlr"|"tb-light"|"tb"|"lr"|"lr-light"	"tlr"
onelyBody	是否只显示中间区域，开启后不会显示左侧栏和顶部栏	boolean	-	false
collapse	是否折叠左侧栏	-	false

Slots

名称	说明	参数
header	顶部栏内容插槽	-
body	中间内容插槽	-
sideHeader	左侧栏头部插槽	-
sideBody	左侧栏中间插槽	-
sideFooter	左侧栏底部插槽	-

Events

事件	说明	参数
collapseChange	左侧栏折叠按钮切换时触发	(collapsed)=>{}
collapseTransitionEnd	折叠过渡完了之后触发	(collapsed)=>{}