mirror of
https://gitee.com/WeBank/fes.js.git
synced 2024-11-30 10:48:12 +08:00
feat(plugin-layout): 优化页面的layout配置
This commit is contained in:
harrywan
parent
ce68e83aa6
commit
053b268ee8
@ -14,8 +14,19 @@
|
||||
|
||||
- 可配置页面是否需要 layout。
|
||||
|
||||
## 启用方式
|
||||
在 `package.json` 中引入依赖：
|
||||
```json
|
||||
{
|
||||
"dependencies": {
|
||||
"@fesjs/fes": "^2.0.0",
|
||||
"@fesjs/plugin-layout": "^2.0.0"
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
## 布局类型
|
||||
配置参数是 `navigation`, 内容默认是 `side`：
|
||||
配置参数是 `navigation`, 布局有三种类型 `side`、`mixin` 和 `top`， 默认是 `side`：
|
||||
```js
|
||||
export default {
|
||||
layout: {
|
||||
@ -36,28 +47,31 @@ export default {
|
||||
<!--  -->
|
||||
<img :src="$withBase('mixin.png')" alt="mixin">
|
||||
|
||||
## 启用方式
|
||||
在 `package.json` 中引入依赖：
|
||||
```json
|
||||
{
|
||||
"dependencies": {
|
||||
"@fesjs/fes": "^2.0.0",
|
||||
"@fesjs/plugin-layout": "^2.0.0"
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
### 页面禁用布局
|
||||
Fes.js 渲染路由时，如果路由元信息存在配置 `layout` 为 `false`，则表示禁用此配置，用户只需要如下配置：
|
||||
布局是默认开启的，但是可能某些页面不需要展示布局样式，比如登录页面。我们只需要在页面的`.vue`中添加如下配置：
|
||||
```vue
|
||||
<config>
|
||||
<config lang="json">
|
||||
{
|
||||
"layout": false
|
||||
}
|
||||
</config>
|
||||
<script>
|
||||
</script>
|
||||
```
|
||||
如果只是不想展示`side`，则：
|
||||
<config lang="json">
|
||||
{
|
||||
"layout": {
|
||||
"side": false
|
||||
}
|
||||
}
|
||||
</config>
|
||||
```
|
||||
`layout`的可选配置有：
|
||||
|
||||
- **side**： 左侧区域
|
||||
|
||||
- **top**： 头部区域
|
||||
|
||||
- **logo**：logo和标题区域。
|
||||
|
||||
## 配置
|
||||
|
||||
@ -174,13 +188,13 @@ export default {
|
||||
- 图标使用[antv icon](https://www.antdv.com/components/icon-cn/)，在这里使用组件type。
|
||||
```js
|
||||
{
|
||||
name: "user"
|
||||
icon: "user"
|
||||
}
|
||||
```
|
||||
- 图表使用本地或者远程svg图片。
|
||||
- 图标使用本地或者远程svg图片。
|
||||
```js
|
||||
{
|
||||
name: "/wine-outline.svg"
|
||||
icon: "/wine-outline.svg"
|
||||
}
|
||||
```
|
||||
|
||||
@ -201,7 +215,7 @@ export const layout = {
|
||||
|
||||
- **默认值**：`null`
|
||||
|
||||
- **详情**：布局的 Header 部位提供组件自定义功能。
|
||||
- **详情**：top的区域部分位置提供组件自定义功能。
|
||||
|
||||
#### unAccessHandler
|
||||
- **类型**：`Function`
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<a-layout
|
||||
v-if="routeHasLayout"
|
||||
v-if="routeLayout"
|
||||
:class="[
|
||||
collapsed ? 'main-layout-collapsed' : '',
|
||||
`main-layout-navigation-${navigation}`,
|
||||
@ -8,7 +8,7 @@
|
||||
]"
|
||||
class="main-layout"
|
||||
>
|
||||
<template v-if="navigation !== 'top'">
|
||||
<template v-if="navigation !== 'top' && routeLayout.side">
|
||||
<div v-if="fixedSideBar" :style="siderFixedStuffStyle" class="layout-sider-fixed-stuff"></div>
|
||||
<a-layout-sider
|
||||
v-model:collapsed="collapsed"
|
||||
@ -20,7 +20,7 @@
|
||||
:theme="siderTheme"
|
||||
collapsible
|
||||
>
|
||||
<div v-if="navigation !== 'mixin'" class="layout-logo">
|
||||
<div v-if="navigation !== 'mixin' && routeLayout.logo" class="layout-logo">
|
||||
<img :src="logo" class="logo-img" />
|
||||
<h1 class="logo-name">{{title}}</h1>
|
||||
</div>
|
||||
@ -28,19 +28,20 @@
|
||||
</a-layout-sider>
|
||||
</template>
|
||||
<a-layout class="child-layout">
|
||||
<a-layout-header v-if="currentFixedHeader" class="layout-header">
|
||||
<a-layout-header v-if="currentFixedHeader && routeLayout.top" class="layout-header">
|
||||
</a-layout-header>
|
||||
<a-layout-header
|
||||
v-if="routeLayout.top"
|
||||
:style="headerFixedStyle"
|
||||
:class="[currentFixedHeader ? 'layout-header-fixed' : '']"
|
||||
class="layout-header"
|
||||
>
|
||||
<div v-if="navigation === 'mixin'" class="layout-logo">
|
||||
<div v-if="navigation === 'mixin' && routeLayout.logo" class="layout-logo">
|
||||
<img :src="logo" class="logo-img" />
|
||||
<h1 class="logo-name">{{title}}</h1>
|
||||
</div>
|
||||
<template v-if="navigation === 'top'">
|
||||
<div class="layout-logo">
|
||||
<div v-if="routeLayout.logo" class="layout-logo">
|
||||
<img :src="logo" class="logo-img" />
|
||||
<h1 class="logo-name">{{title}}</h1>
|
||||
</div>
|
||||
@ -135,9 +136,32 @@ export default {
|
||||
setup(props) {
|
||||
const collapsed = ref(false);
|
||||
const route = useRoute();
|
||||
const routeHasLayout = computed(() => {
|
||||
const _routeLayout = route.meta.layout;
|
||||
return _routeLayout === undefined ? true : _routeLayout;
|
||||
const routeLayoutDefault = {
|
||||
side: true,
|
||||
top: true,
|
||||
logo: true
|
||||
};
|
||||
const routeLayout = computed(() => {
|
||||
let config;
|
||||
// meta 中 layout 默认为 true
|
||||
const metaLayoutConfig = route.meta.layout === undefined ? true : route.meta.layout;
|
||||
if (typeof metaLayoutConfig === 'boolean') {
|
||||
config = metaLayoutConfig ? routeLayoutDefault : false;
|
||||
} else if (typeof metaLayoutConfig === 'object') {
|
||||
config = { ...routeLayoutDefault, ...metaLayoutConfig };
|
||||
} else {
|
||||
console.error('[plugin-layout]: meta layout must be object or boolean！');
|
||||
}
|
||||
// query 中 layout 默认为 false
|
||||
const routeQueryLayoutConfig = route.query.layout && JSON.parse(route.query.layout);
|
||||
if (typeof routeQueryLayoutConfig === 'boolean') {
|
||||
config = routeQueryLayoutConfig ? routeLayoutDefault : false;
|
||||
} else if (typeof routeQueryLayoutConfig === 'object') {
|
||||
config = { ...config, ...routeQueryLayoutConfig };
|
||||
} else if (routeQueryLayoutConfig !== undefined) {
|
||||
console.error('[plugin-layout]: query layout must be object or boolean！');
|
||||
}
|
||||
return config;
|
||||
});
|
||||
const siderTheme = computed(() => {
|
||||
if (props.navigation === 'mixin') {
|
||||
@ -175,7 +199,7 @@ export default {
|
||||
siderTheme,
|
||||
currentFixedHeader,
|
||||
route,
|
||||
routeHasLayout,
|
||||
routeLayout,
|
||||
collapsed,
|
||||
siderFixedStuffStyle,
|
||||
headerFixedStyle
|
||||
|
||||
Loading…
Reference in New Issue
Block a user