mirror of
https://github.com/WeBankFinTech/fes.js.git
synced 2025-04-06 03:59:53 +08:00
docs: 补充文档
This commit is contained in:
parent
426cc13d7c
commit
d637d968a4
@ -90,8 +90,9 @@ Fes.js 里约定目录下有 `layout.vue` 时会生成嵌套路由,以 `layout
|
|||||||
|
|
||||||
```vue
|
```vue
|
||||||
<template>
|
<template>
|
||||||
<Page></Page>
|
<Page />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { Page } from '@fesjs/fes';
|
import { Page } from '@fesjs/fes';
|
||||||
export default {
|
export default {
|
||||||
@ -112,7 +113,7 @@ export default {
|
|||||||
export default {
|
export default {
|
||||||
layout: {
|
layout: {
|
||||||
// 标题
|
// 标题
|
||||||
title: "Fes.js",
|
title: 'Fes.js',
|
||||||
// 底部文字
|
// 底部文字
|
||||||
footer: 'Created by MumbleFE',
|
footer: 'Created by MumbleFE',
|
||||||
// 主题light
|
// 主题light
|
||||||
@ -128,6 +129,7 @@ export default {
|
|||||||
}],
|
}],
|
||||||
|
|
||||||
},
|
},
|
||||||
|
};
|
||||||
```
|
```
|
||||||
|
|
||||||
#### 运行时配置方式
|
#### 运行时配置方式
|
||||||
@ -146,27 +148,29 @@ export const layout = {
|
|||||||
};
|
};
|
||||||
```
|
```
|
||||||
|
|
||||||
在`fes.js`中,运行时配置有定义对象和函数两种方式,当使用函数配置`layout`时,`layoutConfig`是编译时配置结果,`initialState`是 `beforeRender.action`执行后创建的应用初始状态数据。
|
在`fes.js`中,运行时配置有定义对象和函数两种方式,当使用函数配置`layout`时,`layoutConfig`是编译时配置结果,`initialState`是 `beforeRender.action`执行后创建的应用初始状态数据。
|
||||||
。
|
。
|
||||||
|
|
||||||
```js
|
```js
|
||||||
export const layout = (layoutConfig, { initialState }) => ({
|
export function layout(layoutConfig, { initialState }) {
|
||||||
renderCustom: () => <UserCenter />,
|
return {
|
||||||
menus: () => {
|
renderCustom: () => <UserCenter />,
|
||||||
const menusRef = ref(layoutConfig.menus);
|
menus: () => {
|
||||||
watch(
|
const menusRef = ref(layoutConfig.menus);
|
||||||
() => initialState.userName,
|
watch(
|
||||||
() => {
|
() => initialState.userName,
|
||||||
menusRef.value = [
|
() => {
|
||||||
{
|
menusRef.value = [
|
||||||
name: 'store',
|
{
|
||||||
},
|
name: 'store',
|
||||||
];
|
},
|
||||||
},
|
];
|
||||||
);
|
},
|
||||||
return menusRef;
|
);
|
||||||
},
|
return menusRef;
|
||||||
});
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
最终配置结果是运行时配置跟编译时配置合并的结果,运行时配置优先于编译时配置。
|
最终配置结果是运行时配置跟编译时配置合并的结果,运行时配置优先于编译时配置。
|
||||||
@ -194,6 +198,12 @@ export const layout = (layoutConfig, { initialState }) => ({
|
|||||||
|
|
||||||
- **详情**:页面布局类型,可选有 `side`、 `top`、 `mixin`
|
- **详情**:页面布局类型,可选有 `side`、 `top`、 `mixin`
|
||||||
|
|
||||||
|
### navigationOnError
|
||||||
|
|
||||||
|
- **类型**:`String`、`Function`
|
||||||
|
|
||||||
|
- **详情**:指定 `403`、`404` 时,页面的布局类型。值同 `navigation`。也支持函数返回。
|
||||||
|
|
||||||
### isFixedHeader
|
### isFixedHeader
|
||||||
|
|
||||||
- **类型**:`Boolean`
|
- **类型**:`Boolean`
|
||||||
@ -382,7 +392,7 @@ import { useRoute, useTabTitle } from '@fesjs/fes';
|
|||||||
|
|
||||||
const titleRef = useTabTitle(`详情-${route.params?.id}`);
|
const titleRef = useTabTitle(`详情-${route.params?.id}`);
|
||||||
|
|
||||||
//如果要更新
|
// 如果要更新
|
||||||
titleRef.value = 'changed';
|
titleRef.value = 'changed';
|
||||||
</script>
|
</script>
|
||||||
```
|
```
|
||||||
|
@ -218,7 +218,7 @@ export default {
|
|||||||
default: 'side', // side 左右(上/下)、 top 上/下、 mixin 上/下(左/右)
|
default: 'side', // side 左右(上/下)、 top 上/下、 mixin 上/下(左/右)
|
||||||
},
|
},
|
||||||
navigationOnError: {
|
navigationOnError: {
|
||||||
type: String, // 403, 404 时的 navigation
|
type: [String, Function], // 403, 404 时的 navigation
|
||||||
},
|
},
|
||||||
isFixedHeader: {
|
isFixedHeader: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
|
Loading…
x
Reference in New Issue
Block a user