vy-layout

VyLayout

• 这是基于element-plus和vue3.x做的布局组件

Props

Name	Description	Type	Required	Default
iconComponent	渲染布局图标的组件名称,默认为el-icon;若为自定义组件,则必须有icon属性,进行图标渲染	String	false	el-icon
layout	三种不同方式布局	'top' / 'mix'/'side'	false	mix
menus	用于显示菜单的数据	Object[]	true	[]
avatar	头像路径	String	false	-
ellipsis	顶部导航栏是否省略多余的子项	Boolean	false	true
topBackground	顶部导航栏背景色	String	false	#545c64
topActiveColor	顶部导航栏激活字体色	String	false	#409EFF
topColor	顶部导航栏字体色	String	false	#fff
topHeight	顶部导航栏高度	String	false	60px
sideBackground	侧边栏背景色	String	false	#F2F3F5
sideActiveColor	侧边栏激活字体色	String	false	#409EFF
sideColor	侧边栏字体色	String	false	#303133
sideWidth	侧边栏宽度	String	false	200px
collopse	侧边栏默认是否折叠	Boolean	false	true
collopseStyle	侧边栏折叠操作按钮样式	Object	false	{}
expandIcon	侧边栏展开操作按钮图标名称	String	false	Expand
foldIcon	侧边栏折叠操作按钮图标名称	String	false	Fold
logoImg	logo图片的地址	String	false	-
logoTitle	logo的标题	String	false	-

Events

Event Name	Description	Parameters
collopse	折叠操作按钮事件	-

Slots

Name	Description	Default Slot Content
right-content	自定义顶部导航栏右侧内容 或侧边栏底部内容	-
logo	顶部导航栏/侧边栏logo内容	-
other	顶部导航栏/侧边栏其他内容操作	-
logo	顶部导航栏/侧边栏logo内容	-
other	顶部导航栏/侧边栏其他内容操作	-
right-content	自定义顶部导航栏右侧内容或侧边栏底部内容	-
main	主要内容展示区域	-

菜单menus数组对象中的属性

Name	Description	Type	Required	Default
hidden	是否显示菜单	Boolean	false	'false'
path	跳转的路径	String	false	''
meta	-	Object	false	{}

meta对象中的属性

Name	Description	Type	Required	Default
title	菜单标题	String	false	''
icon	菜单显示图标的名称	String	false	''
iconComponent	每一个个性化菜单图标的渲染组件名称;优先级大于layout中的iconComponent	String	false	''

使用方法

• 引入组件及样式
• import VyLayout from 'vy-layout'
• import 'vy-layout/style/index.css'
• app.use(VyLayout)
• 注意事项；自定义菜单图标组件，必须用icon属性来作为图标渲染属性

组件样式