生成页面布局
页面布局 表示一种对界面进行功能区划分以实现高效的人机交互的界面功能分布方案。一种典型的 页面布局 的例子：把页面分成左侧边栏导航菜单、左上角LOGO、上方标题栏和工具栏、下方页脚、中间视图，具体布局示例如下：
|----------------------------------------------------------|
| 图标 | 标题 | 工具 |
| |------------------------------------------------|
|---------| |
| | |
| | |
| | 视图 |
| 导航 | |
| | |
| |------------------------------------------------|
| | 页脚 |
|----------------------------------------------------------|
在 FlexUE 中实现以上布局是非常简单的，只需利用 <x-page> 组件辅以相应的元数据即可实现。
<x-page> 是一个高级组件，其内部组合了 <x-framework> 和 <x-layout> 等一系列组件，提供了以上布局的默认实现。
运用。。。
元数据
首先，通过 元数据 定义 页面布局 ，这个过程只需关注于对界面交互模式的定义，而与界面样式完全无关。典型的 页面布局 需要定义LOGO、导航菜单、工具栏操作列表、页脚等。
定义导航菜单
导航菜单由 菜单分组 和 菜单项 组成。
- 菜单项的基本属性如下：
// 定义一项菜单项；
{
// 唯一键；
key: "0",
// 显示的标题；
title: "首 页",
// 显示的图标；
icon: "el-svg-house",
// 点击时候触发路由跳转的目标视图的 key；
// 可选属性；
routeView: "index",
// 点击时候触发路由跳转的目标 URL；
// 可选属性；
// 与 routeView 属性同时出现时，routePath 属性优先级更高。
routePath: "/target.url"
}
- 菜单分组的基本属性如下：
// 定义一项菜单分组；
{
// 唯一键；
key: "1",
// 显示的标题；
title: "用户管理",
// 显示的图标；
// 可选属性；
icon: "el-svg-house",
// 子菜单列表；
submenus: [
{
key: "1-1",
title: "用户注册",
//routeView: "",
},
{
key: "1-2",
title: "用户审核",
routeView: "user-audit",
},
]
}
- 导航菜单的基本属性如下：
// 定义一组导航菜单；
{
// 菜单列表
menuItems: [
// 菜单项
{
key: "0",
title: "首 页",
icon: "el-svg-house",
routeView: "index",
},
// 菜单组
{
key: "1",
title: "用户管理",
icon: "el-svg-user",
submenus: [
{
key: "1-1",
title: "用户注册",
routeView: "user-registry",
},
{
key: "1-2",
title: "用户审核",
routeView: "user-audit",
},
],
},
]
}
定义工具栏
工具栏 实质是操作集(Actionset)，由*操作集元数据(ActionsetMetadata)定义，主要由多项操作(Action)*元数据组成。
- 操作
(Action)的基本属性如下：
// 定义一项操作；
{
// 唯一键；
key: "btn1",
// 显示的文本；
name: "分享",
// 显示的图标的标签；flexue 默认重定义 Element+ 提供的所有图标；
icon: "el-svg-share",
// 显示模式；
// text-icon 表示同时显示文本和图标；
pattern: "text-icon",
},
- 操作集
(Actionset)的基本属性如下：
// 定义一个操作集；
{
// 操作列表；
actions: [
// 操作；
{
key: "btn1",
name: "分享",
icon: "el-svg-share",
pattern: "text-icon",
},
// 操作；
{
key: "btn2",
name: "设置",
icon: "el-svg-setting",
pattern: "text-icon",
},
]
}
设置图标
在目录 src/assets/ 下放置图标文件，假设命名为 logo.png ，把图标导入后设置到页面元数据的 logo 属性即可将图标呈现到页面的图标区域。
// 导入LOGO图标；
import LOGO from "./assets/logo.png";
// 在页面元数据中引用图标；
{
// 图标；
logo: LOGO,
//...
// menu
// toolabar
};
定义页面元数据
将 图标、导航菜单、工具栏 一起组合成 页面元数据 。
如下：
// 页面元数据；
const METADATA = {
// 图标；
logo: LOGO,
menu: MENU,
toolbar: TOOLBAR_ACTIONS,
};
组件中引用元数据
在组件的定义中引用元数据，如下：
// 定义组件；
export default {
name: "App",
data() {
return {
// 通过 metadata 属性引用页面元数据；
metadata: METADATA,
};
},
};
在组件中绑定元数据
- 首先，需要在组件的定义中引用元数据，如下：
// 定义组件；
export default {
name: "App",
data() {
return {
// 元数据属性 metadata；
metadata: METADATA,
};
},
};
- 其次，需要在模板中配置
<x-page>组件，通过属性引用组件定义中元数据属性 metadata，如下：
通常情况下，
<x-page>组件都可以作为模板中的根组件。
<!DOCTYPE html>
<!-- 通过 x-page 的 metadata 属性绑定元数据 -->
<x-page :metadata="metadata" logo-shape="square" logo-width="60px" logo-height="60px">
</x-page>
