1.0.9 • Published 11 months ago
vy-layout v1.0.9
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属性来作为图标渲染属性
1.0.9
11 months ago
1.0.8
11 months ago
1.0.7
11 months ago
1.0.6
11 months ago
1.0.5
11 months ago
1.0.4
11 months ago
1.0.3
11 months ago
1.0.2
11 months ago
1.0.2--beta.1
11 months ago
1.0.1
11 months ago
1.0.1--beta.8
11 months ago
1.0.1--beta.7
11 months ago
1.0.1--beta.6
11 months ago
1.0.1--beta.5
11 months ago
1.0.1--beta.4
11 months ago
1.0.1--beta.3
11 months ago
1.0.1--beta.2
11 months ago
1.0.1--beta.1
11 months ago
1.0.1--beta.0
11 months ago