在yb-layout-pro的基础上，加入了yb-main-size-menu和 tab 页（vue-router-tab (opens new window)）的结构，形成一个常用的主页组件。

基本用法

<template>
    <yb-main-pro
        style="height: 600px"
        :menuData="menuData"
        :layout="theme.layout"
        @collapseChange="collapseChange"
        @collapseTransitionEnd="collapseTransitionEnd"
    >
        <template v-slot:headerLeft>
            <!-- <img :src="logo" /> -->
            <span v-show="showTitle">{{ systemTitle }}</span>
        </template>
        <template v-slot:headerRight>
            <el-dropdown class="main-user-dropdown" trigger="click">
                <div class="yb-header-click-item" v-show="showUser">
                    <i class="el-icon-user" style="font-size: 18px"></i>
                    <span class="main-user-name">用户名称</span>
                    <i class="el-icon-caret-bottom"></i>
                </div>
                <el-dropdown-menu
                    class="main-user-dropdown-menu"
                    slot="dropdown"
                >
                    <el-dropdown-item>个人中心</el-dropdown-item>
                    <el-dropdown-item>退出</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </template>
    </yb-main-pro>
</template>
<script>
    export default {
        data() {
            return {
                menuData: [
                    {
                        name: '首页',
                        icon: '#yibao-xinxieguan',
                        path: '/home',
                    },
                    {
                        name: '目录菜单1',
                        path: '/parent1',
                        icon: '#yibao-huore',
                        children: [
                            {
                                name: '子级菜单',
                                path: '/mychild1',
                            },
                        ],
                    },
                    {
                        name: '目录菜单2',
                        path: '/parent2',
                        icon: '#yibao-gongneng',
                        children: [
                            {
                                name: '子级菜单',
                                path: '/mychild2',
                            },
                        ],
                    },
                ],
                systemTitle: '标题',
                theme: { layout: 'tlr' },
                collapse: false,
                collapeTransEnd: true,
            };
        },
        computed: {
            showTitle() {
                let showTitle = true;
                switch (this.theme.layout) {
                    case 'ltr':
                    case 'ltr-light':
                    case 'lr':
                    case 'lr-light':
                        if (this.collapse || !this.collapeTransEnd) {
                            showTitle = false;
                        }
                        break;
                    default:
                }
                return showTitle;
            },
            showUser() {
                let showUser = true;
                switch (this.theme.layout) {
                    case 'lr':
                    case 'lr-light':
                        if (this.collapse || !this.collapeTransEnd) {
                            showUser = false;
                        }
                        break;
                    default:
                }
                return showUser;
            },
        },
        methods: {
            collapseChange(collapse) {
                this.collapse = collapse;
                this.collapeTransEnd = false;
            },
            collapseTransitionEnd() {
                this.collapeTransEnd = true;
            },
        },
    };
</script>

运用在实际项目中，完善之后的案例

props

参数	说明	类型	可选值	默认值
layout	布局类型	string	"tlr"|"tlr-light"|"ltr"|"ltr-light"|"ltr-dark"|"ttlr"|"tb-light"|"tb"|"lr"|"lr-light"	"tlr"
onelyBody	是否只显示中间区域，开启后不会显示左侧栏和顶部栏	boolean	-	false
collapse	是否折叠左侧栏	-	false	-
menuType	菜单类型，同YbMainSideMenu type 属性	string	'simple'	-
menuData	菜单数据	object[]	-	-
menuData[].name	菜单名称	string	-	-
menuData[].path	菜单路径，路由跳转	string	-	-
menuData[].icon	小图标，以"#"开头的是多色图标，否则就是 i 标签的 calssname	string	-	-
menuData[].children	子菜单数据	object[]	-	-
watermarkOptions	水印配置	object{show:false}	-	-
...	其他属性同 yb-layout-pro	-	-	-

watermarkOptions

参数	说明	类型	可选值	默认值
show	是否显示水印型	boolean	-	false
gapX	水印之间的水平间距	number	-	-
gapY	水印之间的垂直间距	number	-	-
offsetLeft	水印在 canvas 画布上绘制的水平偏移量	number	-	-
offsetTop	水印在 canvas 画布上绘制的垂直偏移量	number	-	-
width	单个水印宽度	number	-	-
height	单个水印宽度	number	-	-
opacity	水印透明度	number	-	-
rotate	旋转的角度	number	-	-
fontSize	设置字体大小	number	-	-
fontColor	设置字体颜色	string	-	-
fontFamily	设置水印文字的字体	string	-	-
monitor	是否开启监视模式	boolean	-	true
text	水印文本, 为数组时表示多行水印	string | string[]	-	-
zIndex	样式层级	number	-	-

ScopedSlots

名称	说明	参数
headerLeft	顶部栏左侧内容插槽	{position}
headerRight	顶部栏右侧内容插槽	{position}
menuTitle	导航名称插槽	{position,path,name,...}

Events

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