vy-layout
1.0.9 • Public • Published 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属性来作为图标渲染属性
组件样式
Dependencies (0)
Dev Dependencies (13)
Package Sidebar
Install
Weekly Downloads