mirror of
https://github.com/WeBankFinTech/fes.js.git
synced 2025-06-30 02:35:08 +08:00
fix: 修复一些问题
This commit is contained in:
parent
d97a129693
commit
194eb03526
@ -198,7 +198,17 @@ const router = new VueRouter({
|
|||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
接下来我们看看如何配置 `meta`。在单文件组件中可以通过`<config></config>`定义:
|
我们使用`defineRouteMeta` 配置 `meta`:
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
import { defineRouteMete } from '@fesjs/fes';
|
||||||
|
defineRouteMeta({
|
||||||
|
name: "store",
|
||||||
|
title: "vuex测试"
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
当然在单文件组件中,还可以通过`<config></config>`配置 `meta`:
|
||||||
|
|
||||||
```vue
|
```vue
|
||||||
<config>
|
<config>
|
||||||
@ -209,15 +219,10 @@ const router = new VueRouter({
|
|||||||
</config>
|
</config>
|
||||||
```
|
```
|
||||||
|
|
||||||
在使用`jsx`或者`tsx`时,可以使用`defineRouteMeta` 定义:
|
::: tip
|
||||||
|
推荐使用`defineRouteMete`,有更好的提示。
|
||||||
|
:::
|
||||||
|
|
||||||
```jsx
|
|
||||||
import { defineRouteMete } from '@fesjs/fes';
|
|
||||||
defineRouteMeta({
|
|
||||||
name: "store",
|
|
||||||
title: "vuex测试"
|
|
||||||
})
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
||||||
路由元信息在编译后会附加到路由配置中:
|
路由元信息在编译后会附加到路由配置中:
|
||||||
|
@ -176,14 +176,14 @@ export const layout = (layoutConfig, { initialState }) => ({
|
|||||||
|
|
||||||
- **详情**:页面布局类型,可选有 `side`、 `top`、 `mixin`
|
- **详情**:页面布局类型,可选有 `side`、 `top`、 `mixin`
|
||||||
|
|
||||||
### isHeaderFixed
|
### isFixedHeader
|
||||||
- **类型**:`Boolean`
|
- **类型**:`Boolean`
|
||||||
|
|
||||||
- **默认值**:`false`
|
- **默认值**:`false`
|
||||||
|
|
||||||
- **详情**:是否固定头部,不跟随页面滚动。
|
- **详情**:是否固定头部,不跟随页面滚动。
|
||||||
|
|
||||||
### isSidebarFixed
|
### isFixedSidebar
|
||||||
- **类型**:`Boolean`
|
- **类型**:`Boolean`
|
||||||
|
|
||||||
- **默认值**:`true`
|
- **默认值**:`true`
|
||||||
@ -345,7 +345,7 @@ export const access = {
|
|||||||
|
|
||||||
1. 个性化 layout 配置改为使用传入 navigation
|
1. 个性化 layout 配置改为使用传入 navigation
|
||||||
2. renderHeader 改为 renderCustom
|
2. renderHeader 改为 renderCustom
|
||||||
3. fixedHeader 改为 isHeaderFixed
|
3. fixedHeader 改为 isFixedHeader
|
||||||
4. menusConfig 改为 menusProps
|
4. menusConfig 改为 menusProps
|
||||||
5. fixedSideBar 改为 isSidebarFixed
|
5. fixedSideBar 改为 isFixedSidebar
|
||||||
6. 去掉运行时 logo、header、sidebar 三个区域显示配置,请改为使用 navigation: left-right
|
6. 去掉运行时 logo、header、sidebar 三个区域显示配置,请改为使用 navigation: left-right
|
@ -1,3 +1 @@
|
|||||||
import page from './views/page.vue';
|
export Page from './views/page.vue';
|
||||||
|
|
||||||
export const Page = page;
|
|
@ -3,7 +3,7 @@
|
|||||||
<template v-if="currentNavigation === 'side'">
|
<template v-if="currentNavigation === 'side'">
|
||||||
<f-aside
|
<f-aside
|
||||||
v-model:collapsed="collapsedRef"
|
v-model:collapsed="collapsedRef"
|
||||||
:fixed="isSidebarFixed"
|
:fixed="isFixedSidebar"
|
||||||
:width="`${sideWidth}px`"
|
:width="`${sideWidth}px`"
|
||||||
class="layout-aside"
|
class="layout-aside"
|
||||||
collapsible
|
collapsible
|
||||||
@ -24,7 +24,7 @@
|
|||||||
:accordion="menuProps?.accordion"
|
:accordion="menuProps?.accordion"
|
||||||
/>
|
/>
|
||||||
</f-aside>
|
</f-aside>
|
||||||
<f-layout :fixed="isSidebarFixed" :style="sideStyleRef">
|
<f-layout :fixed="isFixedSidebar" :style="sideStyleRef">
|
||||||
<f-header ref="headerRef" class="layout-header" :fixed="currentFixedHeaderRef">
|
<f-header ref="headerRef" class="layout-header" :fixed="currentFixedHeaderRef">
|
||||||
<div class="layout-header-custom">
|
<div class="layout-header-custom">
|
||||||
<slot name="renderCustom"></slot>
|
<slot name="renderCustom"></slot>
|
||||||
@ -46,7 +46,7 @@
|
|||||||
<template v-if="currentNavigation === 'left-right'">
|
<template v-if="currentNavigation === 'left-right'">
|
||||||
<f-aside
|
<f-aside
|
||||||
v-model:collapsed="collapsedRef"
|
v-model:collapsed="collapsedRef"
|
||||||
:fixed="isSidebarFixed"
|
:fixed="isFixedSidebar"
|
||||||
:width="`${sideWidth}px`"
|
:width="`${sideWidth}px`"
|
||||||
class="layout-aside"
|
class="layout-aside"
|
||||||
collapsible
|
collapsible
|
||||||
@ -79,7 +79,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</f-aside>
|
</f-aside>
|
||||||
<f-layout :fixed="isSidebarFixed" :style="sideStyleRef">
|
<f-layout :fixed="isFixedSidebar" :style="sideStyleRef">
|
||||||
<f-layout :embedded="!multiTabs">
|
<f-layout :embedded="!multiTabs">
|
||||||
<f-main class="layout-main">
|
<f-main class="layout-main">
|
||||||
<MultiTabProvider :multiTabs="multiTabs" />
|
<MultiTabProvider :multiTabs="multiTabs" />
|
||||||
@ -135,7 +135,7 @@
|
|||||||
</template>
|
</template>
|
||||||
</f-header>
|
</f-header>
|
||||||
<f-layout :fixed="currentFixedHeaderRef" :style="headerStyleRef">
|
<f-layout :fixed="currentFixedHeaderRef" :style="headerStyleRef">
|
||||||
<f-aside v-model:collapsed="collapsedRef" :fixed="isSidebarFixed" :width="`${sideWidth}px`" collapsible class="layout-aside">
|
<f-aside v-model:collapsed="collapsedRef" :fixed="isFixedSidebar" :width="`${sideWidth}px`" collapsible class="layout-aside">
|
||||||
<Menu
|
<Menu
|
||||||
class="layout-menu"
|
class="layout-menu"
|
||||||
:menus="menus"
|
:menus="menus"
|
||||||
@ -146,7 +146,7 @@
|
|||||||
:accordion="menuProps?.accordion"
|
:accordion="menuProps?.accordion"
|
||||||
/>
|
/>
|
||||||
</f-aside>
|
</f-aside>
|
||||||
<f-layout :embedded="!multiTabs" :fixed="isSidebarFixed" :style="sideStyleRef">
|
<f-layout :embedded="!multiTabs" :fixed="isFixedSidebar" :style="sideStyleRef">
|
||||||
<f-main class="layout-main">
|
<f-main class="layout-main">
|
||||||
<MultiTabProvider :multiTabs="multiTabs" />
|
<MultiTabProvider :multiTabs="multiTabs" />
|
||||||
</f-main>
|
</f-main>
|
||||||
@ -209,11 +209,11 @@ export default {
|
|||||||
type: String,
|
type: String,
|
||||||
default: 'side', // side 左右(上/下)、 top 上/下、 mixin 上/下(左/右)
|
default: 'side', // side 左右(上/下)、 top 上/下、 mixin 上/下(左/右)
|
||||||
},
|
},
|
||||||
isHeaderFixed: {
|
isFixedHeader: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false,
|
default: false,
|
||||||
},
|
},
|
||||||
isSidebarFixed: {
|
isFixedSidebar: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: true,
|
default: true,
|
||||||
},
|
},
|
||||||
@ -243,11 +243,11 @@ export default {
|
|||||||
return props.navigation;
|
return props.navigation;
|
||||||
});
|
});
|
||||||
|
|
||||||
const currentFixedHeaderRef = computed(() => props.isHeaderFixed || props.navigation === 'mixin');
|
const currentFixedHeaderRef = computed(() => props.isFixedHeader || props.navigation === 'mixin');
|
||||||
const headerStyleRef = computed(() => (currentFixedHeaderRef.value ? { top: `${headerHeightRef.value}px` } : null));
|
const headerStyleRef = computed(() => (currentFixedHeaderRef.value ? { top: `${headerHeightRef.value}px` } : null));
|
||||||
const sideStyleRef = computed(() => {
|
const sideStyleRef = computed(() => {
|
||||||
const left = collapsedRef.value ? '48px' : `${props.sideWidth}px`;
|
const left = collapsedRef.value ? '48px' : `${props.sideWidth}px`;
|
||||||
return props.isSidebarFixed ? { left } : null;
|
return props.isFixedSidebar ? { left } : null;
|
||||||
});
|
});
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user