插槽

只有Const.enableLayoutSlot为true时才能使用插槽功能！

所有插槽都可以用store中对应的render来代替：

<template>
    <el-admin-layout>
        <template v-slot:logo>
            <img src="logo地址">
            <h1>标题</h1>
        </template>
    </el-admin-layout>
</template>

等价于：

import {appMutations} from 'el-admin-layout'

//正常render写法
appMutations.logoSlot(h => [
    h('img', {attrs: {src: 'logo地址'}}), 
    h('h1', '标题')
])
//jsx写法
appMutations.logoSlot(h => [
    <img src={'logo地址'}>,
    <h1>标题</h1>
])

WARNING

el-admin-layout虽然支持slot和render两种自定义渲染方式，但是，要么用slot要么用render，不要两种都用！

因为vue2的插槽存在bug（或者说设计问题），所以实际上el-admin-layout用的是render，只不过在layout组件那里做了些处理，让你能够用slot罢了

注意

插槽中传递的默认元素（VNode类型）不一定有值，具体条件需要自行查阅源码

插槽和render的对应关系

插槽	对应的store属性
logo	appStore.logoSlot
aside	asideStore.defaultSlot
aside-header	asideStore.headerSlot
aside-footer	asideStore.footerSlot
aside-menu-icon	asideStore.menuIconSlot
aside-menu-content	asideStore.menuContentSlot
header-left	headerStore.leftSlot
header-center	headerStore.centerSlot
header-right	headerStore.rightSlot
header-dropdown-items	headerStore.dropdownItems
header-menu-icon	headerStore.menuIconSlot
header-menu-content	headerStore.menuContentSlot
tags-view-item	tagsViewStore.itemSlot
page-header	pageStore.headerSlot
page-footer	pageStore.footerSlot

如何在template中使用VNode？

<template>
    <el-admin-layout>
        <template v-slot:logo="{img, title}">
            <example :img="img" :title="title"/>
        </template>
    </el-admin-layout>
</template>

export default {
    components: {
        Example: {
            //只有函数式组件可以返回多个根节点
            functional: true,

            props: {img: Object, title: Object},

            render(h, context) {
                const {img, title} = context.props
                
                //img和title已经是VNode，直接返回即可
                return [img, title]
            }
        }
    }
}

logo

自定义侧边栏顶部和顶栏左侧的logo

传入参数为{img:VNode, title:VNode, props}，title仅在props.showTitle的情况下有值，props是logo实例当前接收到的$props，目前只有showTitle属性，为true时说明需要显示标题

侧边栏部分

aside

自定义侧边栏（外面会包裹一层<aside/>标签），无传入参数

aside-header

自定义侧边栏顶部内容，传入参数为(logo: Vnode)

aside-footer

自定义侧边栏底部内容，传入参数为(hamburger: Vnode)

aside-menu-icon

自定义侧边栏菜单的图标，传入参数为{menu: MenuItem, depth: number}，menu是菜单对象，depth是菜单当前的层级深度，从1开始

aside-menu-content

自定义侧边栏菜单的内容，传入参数为{menu: MenuItem, depth: number}，同上

顶栏部分

header-left

自定义顶栏的左侧内容，传入参数为[logo: Vnode, hamburger: VNode]

header-center

自定义顶栏的中间内容，传入参数为[headMenu: Vnode]

header-right

自定义顶栏的右侧内容，传入参数为[refreshBtn: Vnode, dropdown: VNode]

header-dropdown-items

自定义下拉菜单项，无传入参数，优先于headerStore.dropdownItems使用

插槽内容会作为<el-dropdown-menu/> (opens new window)的子级，因此最好是一个由<el-dropdown-item/>组成的数组：

<template v-slot:header-dropdown-items>
    <el-dropdown-item>个人中心</el-dropdown-item>
    <el-dropdown-item>退出</el-dropdown-item>
</template>

header-menu-icon

自定义顶栏菜单的图标，传入参数为{menu: MenuItem, depth: number}，menu是菜单对象，depth是菜单当前的层级深度，从1开始

header-menu-content

自定义顶栏菜单的内容，传入参数为{menu: MenuItem, depth: number}，同上

页面部分

page-header

自定义页头内容，无传入参数

page-footer

自定义页脚内容，无传入参数

页签栏部分

tags-view-item

自定义页签，传入参数为{key: string, active: boolean, on?: { [k: string]: Function }, title: string, close?: Function}， key是vue的key属性，active说明该页签是否激活，on是页签绑定的事件，title是页签文字，close是点击关闭按钮时触发的函数