Skip to content

P
pro-layout
Commit 2b556487 authored by Sendya's avatar Sendya
Browse files
Options

fix: layout test

parent 8a8fc81d
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 643 additions and 248 deletions
.eslintrc.js
View file @ 2b556487
......@@ -11,12 +11,18 @@ module.exports = {
'@vue/prettier/@typescript-eslint',
],
parserOptions: {
// ecmaVersion: 2020,
parser: '@typescript-eslint/parser',
ecmaVersion: 2020,
// parser: '@typescript-eslint/parser',
},
rules: {
'@typescript-eslint/no-explicit-any': 0,
'@typescript-eslint/no-inferrable-types': 0,
'@typescript-eslint/ban-ts-ignore': 'off',
'@typescript-eslint/no-var-requires': 'off',
'@typescript-eslint/no-explicit-any': 'off',
'@typescript-eslint/explicit-function-return-type': 'off',
'@typescript-eslint/no-empty-function': 'off',
'@typescript-eslint/no-non-null-assertion': 'off',
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
},
......
.prettierrc
View file @ 2b556487
{
"singleQuote": true,
"trailingComma": "all",
"endOfLine" : "lf",
"printWidth": 100,
"proseWrap": "never",
"arrowParens": "avoid",
"htmlWhitespaceSensitivity": "ignore",
"overrides": [
{
"files": ".prettierrc",
......
examples/index.tsx
View file @ 2b556487
......@@ -6,7 +6,6 @@ import { default as ProLayout } from '../src/';
import { menus } from './menus';
import * as Icon from '@ant-design/icons-vue';
import { createRouteContext, RouteContextProps } from '../src/RouteContext';
import { DemoBox } from './demoBox';
const BasicLayout = defineComponent({
name: 'BasicLayout',
......@@ -29,20 +28,24 @@ const BasicLayout = defineComponent({
hasHeader: true,
hasFooterToolbar: false,
setHasFooterToolbar: (has: boolean) => (state.hasFooterToolbar = has),
})
const [ RouteContextProvider ] = createRouteContext();
});
const [RouteContextProvider] = createRouteContext();
const cacheOpenKeys = ref<string[]>([]);
watch(
() => state.collapsed,
(collapsed: boolean) => {
console.log('post watch', collapsed, state.collapsed);
if (collapsed) {
cacheOpenKeys.value = state.openKeys;
state.openKeys = [];
} else {
state.openKeys = cacheOpenKeys.value;
}
}
},
{
flush: 'pre',
},
);
return () => (
......@@ -63,15 +66,15 @@ const BasicLayout = defineComponent({
v-slots={{
rightContentRender: () => (
<div style="color: #FFF;margin-right: 16px;">
<Avatar icon={(<Icon.UserOutlined />)} /> Sendya
<Avatar icon={<Icon.UserOutlined />} /> Sendya
</div>
),
menuHeaderRender: () => (
<a>
<img src="https://gw.alipayobjects.com/zos/antfincdn/PmY%24TNNDBI/logo.svg" />
{state.collapsed ? null : (<h1>Pro Layout</h1>)}
{state.collapsed ? null : <h1>Pro Layout</h1>}
</a>
)
),
}}
>
<Button
......
package.json
View file @ 2b556487
......@@ -28,42 +28,42 @@
},
"devDependencies": {
"@ant-design-vue/tools": "^3.0.4",
"@babel/core": "^7.12.9",
"@babel/core": "^7.12.10",
"@babel/plugin-proposal-export-default-from": "^7.12.1",
"@babel/plugin-transform-modules-commonjs": "^7.12.1",
"@babel/plugin-transform-object-assign": "^7.12.1",
"@babel/preset-env": "^7.12.7",
"@types/fs-extra": "^9.0.2",
"@babel/preset-env": "^7.12.11",
"@types/fs-extra": "^9.0.6",
"@types/jest": "^24.0.17",
"@types/node": "^13.13.15",
"@types/rimraf": "^3.0.0",
"@typescript-eslint/eslint-plugin": "^2.33.0",
"@typescript-eslint/parser": "^2.33.0",
"@vue/babel-plugin-jsx": "^1.0.0-rc.3",
"@vue/babel-plugin-jsx": "^1.0.0-rc.5",
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-plugin-typescript": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/compiler-sfc": "^3.0.0-0",
"@vue/compiler-sfc": "^3.0.3",
"@vue/eslint-config-prettier": "^6.0.0",
"@vue/eslint-config-typescript": "^5.0.2",
"@vue/test-utils": "^2.0.0-beta.2",
"babel-jest": "^26.6.3",
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
"cross-env": "^5.2.0",
"eslint": "^6.7.2",
"eslint-config-prettier": "^6.15.0",
"eslint-plugin-prettier": "^3.1.3",
"eslint-plugin-vue": "^7.0.0-0",
"cross-env": "^7.0.3",
"eslint": "^7.16.0",
"eslint-config-prettier": "^7.1.0",
"eslint-plugin-prettier": "^3.3.0",
"eslint-plugin-vue": "^7.3.0",
"fs-extra": "^9.0.1",
"jest": "^26.6.3",
"jest-environment-jsdom-fifteen": "^1.0.2",
"jest-serializer-vue": "^2.0.2",
"jest-transform-stub": "^2.0.0",
"prettier": "^1.19.1",
"prettier": "^2.2.1",
"rimraf": "^3.0.2",
"ts-jest": "^26.4.4",
"ts-node": "^8.10.2",
"ts-node": "^9.1.1",
"typescript": "~3.9.3",
"vue": "^3.0.0-0",
"vue-jest": "^5.0.0-alpha.3",
......@@ -71,8 +71,8 @@
},
"dependencies": {
"@babel/runtime": "^7.11.2",
"ant-design-vue": "^2.0.0-beta.10",
"lodash-es": "^4.17.15",
"ant-design-vue": "^2.0.0-rc.5",
"lodash-es": "^4.17.20",
"vue-types": "^3.0.1"
},
"config": {
......
src/BasicLayout.tsx
View file @ 2b556487
......@@ -3,7 +3,6 @@ import 'ant-design-vue/es/layout/style';
import Layout from 'ant-design-vue/es/layout';
import { withInstall } from 'ant-design-vue/es/_util/type';
import { default as ProProvider, ProProviderData } from './ProProvider';
import { default as GlobalFooter } from './GlobalFooter';
import { default as SiderMenuWrapper, SiderMenuWrapperProps } from './SiderMenu';
import { WrapContent } from './WrapContent';
import { default as Header, HeaderViewProps } from './Header';
......@@ -14,41 +13,42 @@ import './BasicLayout.less';
const defaultI18nRender = (key: string) => key;
export type BasicLayoutProps = SiderMenuWrapperProps & HeaderViewProps & {
pure?: boolean;
/**
*@name logo url
*/
logo?: string | RenderVNodeType | WithFalse<string | RenderVNodeType>;
export type BasicLayoutProps = SiderMenuWrapperProps &
HeaderViewProps & {
pure?: boolean;
/**
*@name logo url
*/
logo?: string | RenderVNodeType | WithFalse<string | RenderVNodeType>;
loading?: boolean;
loading?: boolean;
i18n?: ProProviderData['i18n'];
i18n?: ProProviderData['i18n'];
defaultCollapsed?: boolean;
defaultCollapsed?: boolean;
onCollapse?: (collapsed: boolean) => void;
onCollapse?: (collapsed: boolean) => void;
footerRender?: WithFalse<
(props: any /* FooterProps */, defaultDom: RenderVNodeType) => RenderVNodeType
>;
footerRender?: WithFalse<
(props: any /* FooterProps */, defaultDom: RenderVNodeType) => RenderVNodeType
>;
headerRender?: WithFalse<(props: any /* HeaderProps */) => RenderVNodeType>;
headerRender?: WithFalse<(props: any /* HeaderProps */) => RenderVNodeType>;
colSize?: string;
/**
* 是否禁用移动端模式，有的管理系统不需要移动端模式，此属性设置为true即可
*/
disableMobile?: boolean;
colSize?: string;
/**
* 是否禁用移动端模式，有的管理系统不需要移动端模式，此属性设置为true即可
*/
disableMobile?: boolean;
isChildrenLayout?: boolean;
isChildrenLayout?: boolean;
contentStyle?: CSSProperties;
/**
* 兼用 content的 margin
*/
disableContentMargin?: boolean;
};
contentStyle?: CSSProperties;
/**
* 兼用 content的 margin
*/
disableContentMargin?: boolean;
};
const ProLayout: FunctionalComponent<BasicLayoutProps> = (props, { emit, slots, attrs }) => {
const {
......@@ -102,28 +102,31 @@ const ProLayout: FunctionalComponent<BasicLayoutProps> = (props, { emit, slots,
customHeaderRender: VNodeChild | false;
rightContentRender: VNodeChild | false;
},
matchMenuKeys: string[]
matchMenuKeys: string[],
): RenderVNodeType => {
if (props.headerRender === false || props.pure) {
return null;
}
return <Header matchMenuKeys={matchMenuKeys} {...props} headerHeight={48} />;
}
};
const rightContentRender = getComponentOrSlot(props, slots, 'rightContentRender');
const customHeaderRender = getComponentOrSlot(props, slots, 'headerRender');;
const headerDom = headerRender({
...props,
hasSiderMenu: isTop.value,
menuData,
isMobile,
collapsed,
onCollapse,
onSelect: handleSelect,
onOpenChange: handleOpenChange,
customHeaderRender,
rightContentRender,
theme: (navTheme || 'dark').toLocaleLowerCase().includes('dark') ? 'dark' : 'light',
}, matchMenuKeys);
const customHeaderRender = getComponentOrSlot(props, slots, 'headerRender');
const headerDom = headerRender(
{
...props,
hasSiderMenu: isTop.value,
menuData,
isMobile,
collapsed,
onCollapse,
onSelect: handleSelect,
onOpenChange: handleOpenChange,
customHeaderRender,
rightContentRender,
theme: (navTheme || 'dark').toLocaleLowerCase().includes('dark') ? 'dark' : 'light',
},
matchMenuKeys,
);
const footerRender = getComponentOrSlot(props, slots, 'footerRender');
const menuRender = getComponentOrSlot(props, slots, 'menuRender');
......@@ -133,26 +136,28 @@ const ProLayout: FunctionalComponent<BasicLayoutProps> = (props, { emit, slots,
return (
<ProProvider i18n={defaultI18nRender}>
{ props.pure
? (slots.default?.())
: (
<div class={className.value}>
<Layout class={baseClassName.value}>
{ !isTop.value && (<SiderMenuWrapper
{props.pure ? (
slots.default?.()
) : (
<div class={className.value}>
<Layout class={baseClassName.value}>
{!isTop.value && (
<SiderMenuWrapper
{...props}
menuHeaderRender={menuHeaderRenderFunc || (menuHeaderRenderSlot && (() => menuHeaderRenderSlot()))}
menuHeaderRender={
menuHeaderRenderFunc || (menuHeaderRenderSlot && (() => menuHeaderRenderSlot()))
}
onCollapse={handleCollapse}
/>)}
<Layout>
{headerDom}
<WrapContent style={props.contentStyle}>
{slots.default?.()}
</WrapContent>
{ footerRender !== false && (footerRender && footerRender)}
</Layout>
/>
)}
<Layout>
{headerDom}
<WrapContent style={props.contentStyle}>{slots.default?.()}</WrapContent>
{footerRender !== false && footerRender && footerRender}
</Layout>
</div>
)}
</Layout>
</div>
)}
</ProProvider>
);
};
......
src/GlobalHeader/index.tsx
View file @ 2b556487
import { computed, CSSProperties, FunctionalComponent, toRefs } from 'vue';
import { computed, CSSProperties, FunctionalComponent } from 'vue';
import { PureSettings } from '../defaultSettings';
import { RenderVNodeType, MenuDataItem, WithFalse } from '../typings';
import { SiderMenuProps, PrivateSiderMenuProps, defaultRenderLogo, defaultRenderLogoAndTitle, defaultRenderCollapsedButton } from '../SiderMenu/SiderMenu';
import {
SiderMenuProps,
PrivateSiderMenuProps,
defaultRenderLogo,
defaultRenderLogoAndTitle,
defaultRenderCollapsedButton,
} from '../SiderMenu/SiderMenu';
import { TopNavHeader } from '../TopNavHeader';
import { clearMenuItem } from '../utils';
import type { HeaderViewProps } from '../Header';
......@@ -23,7 +29,7 @@ export interface GlobalHeaderProps extends Partial<PureSettings> {
menuHeaderRender?: SiderMenuProps['menuHeaderRender'];
collapsedButtonRender?: SiderMenuProps['collapsedButtonRender'];
splitMenus?: boolean;
};
}
const renderLogo = (
menuHeaderRender: SiderMenuProps['menuHeaderRender'],
......@@ -38,7 +44,10 @@ const renderLogo = (
return logoDom;
};
export const GlobalHeader: FunctionalComponent<GlobalHeaderProps & PrivateSiderMenuProps> = (props, { slots }) => {
export const GlobalHeader: FunctionalComponent<GlobalHeaderProps & PrivateSiderMenuProps> = (
props,
{ slots },
) => {
const {
isMobile,
logo,
......@@ -48,7 +57,7 @@ export const GlobalHeader: FunctionalComponent<GlobalHeaderProps & PrivateSiderM
rightContentRender,
menuHeaderRender,
onMenuHeaderClick,
className: propClassName,
// className: propClassName,
layout,
headerTheme = 'dark',
splitMenus,
......@@ -62,10 +71,10 @@ export const GlobalHeader: FunctionalComponent<GlobalHeaderProps & PrivateSiderM
return {
[baseClassName.value]: true,
[`${baseClassName.value}-layout-${layout}`]: layout && headerTheme === 'dark',
}
};
});
if (layout === 'mix' && !isMobile && splitMenus) {
const noChildrenMenuData = (menuData || []).map((item) => ({
const noChildrenMenuData = (menuData || []).map(item => ({
...item,
children: undefined,
}));
......@@ -110,12 +119,11 @@ export const GlobalHeader: FunctionalComponent<GlobalHeaderProps & PrivateSiderM
</>
)}
<div style={{ flex: 1 }}>{slots.default?.()}</div>
{ rightContentRender && typeof rightContentRender === 'function'
{rightContentRender && typeof rightContentRender === 'function'
? rightContentRender(props)
: rightContentRender
}
: rightContentRender}
</div>
);
}
};
export default GlobalHeader;
src/GridContent/index.tsx
View file @ 2b556487
import { FunctionalComponent, CSSProperties, toRefs } from 'vue';
import { FunctionalComponent, CSSProperties } from 'vue';
import { useProProvider } from '../ProProvider';
import { PureSettings } from '../defaultSettings';
import './GridContent.less';
......
src/Header.tsx
View file @ 2b556487
import { defineComponent, computed, toRefs, toRaw } from 'vue';
import { defineComponent, computed, toRefs } from 'vue';
import 'ant-design-vue/es/layout/style';
import Layout from 'ant-design-vue/es/layout';
......@@ -55,24 +55,37 @@ export const headerProps = [
'navTheme',
'onSelect',
'onOpenChange',
]
];
export const HeaderView = defineComponent({
inheritAttrs: false,
name: 'HeaderView',
props: headerProps,
setup(props: HeaderViewProps) {
const { prefixCls, headerRender, headerContentRender, isMobile, fixedHeader, hasSiderMenu, headerHeight, layout, navTheme, onCollapse } = toRefs(props);
console.log('HeaderView', props)
const {
prefixCls,
headerRender,
headerContentRender,
isMobile,
fixedHeader,
hasSiderMenu,
headerHeight,
layout,
navTheme,
onCollapse,
} = toRefs(props);
console.log('HeaderView', props);
const isTop = computed(() => props.layout === 'top');
const needFixedHeader = computed(() => fixedHeader.value || layout.value === 'mix');
const needSettingWidth = computed(() => needFixedHeader.value && hasSiderMenu.value && !isTop.value && !isMobile.value);
const needSettingWidth = computed(
() => needFixedHeader.value && hasSiderMenu.value && !isTop.value && !isMobile.value,
);
const clearMenuData = computed(() => clearMenuItem(props.menuData || []));
const className = computed(() => {
return {
[`${prefixCls.value}-fixed-header`]: needFixedHeader.value,
[`${prefixCls.value}-top-menu`]: isTop.value,
}
};
});
const renderContent = () => {
let defaultDom = (
......@@ -95,7 +108,7 @@ export const HeaderView = defineComponent({
return headerRender.value(props, defaultDom);
}
return defaultDom;
}
};
/**
* 计算侧边栏的宽度，不然导致左边的样式会出问题
......@@ -103,9 +116,9 @@ export const HeaderView = defineComponent({
const width = computed(() => {
return layout.value !== 'mix' && needSettingWidth.value
? `calc(100% - ${props.collapsed ? 48 : props.siderWidth}px)`
: '100%';
: '100%';
});
const right = computed(() => needFixedHeader.value ? 0 : undefined);
const right = computed(() => (needFixedHeader.value ? 0 : undefined));
return () => (
<>
{needFixedHeader.value && (
......
src/ProProvider/index.tsx
View file @ 2b556487
......@@ -65,7 +65,7 @@ const ProProvider = defineComponent({
},
});
ProProvider.install = function(app: App) {
ProProvider.install = function (app: App) {
app.component(ProProvider.name, ProProvider);
};
......
src/RouteContext.tsx
View file @ 2b556487
......@@ -14,10 +14,18 @@ export interface BreadcrumbProps {
routes?: Route[];
params?: any;
separator?: VNodeChild;
itemRender?: (route: Route, params: any, routes: Array<Route>, paths: Array<string>) => VNodeChild;
itemRender?: (
route: Route,
params: any,
routes: Array<Route>,
paths: Array<string>,
) => VNodeChild;
}
export type BreadcrumbListReturn = Pick<BreadcrumbProps, Extract<keyof BreadcrumbProps, 'routes' | 'itemRender'>>;
export type BreadcrumbListReturn = Pick<
BreadcrumbProps,
Extract<keyof BreadcrumbProps, 'routes' | 'itemRender'>
>;
export interface MenuState {
selectedKeys: string[];
......@@ -44,8 +52,6 @@ export interface RouteContextProps extends Partial<PureSettings>, MenuState {
const routeContextInjectKey: InjectionKey<RouteContextProps> = Symbol();
export const createRouteContext = () =>
createContext<RouteContextProps>(routeContextInjectKey);
export const createRouteContext = () => createContext<RouteContextProps>(routeContextInjectKey);
export const useRouteContext = () =>
useContext<RouteContextProps>(routeContextInjectKey);
export const useRouteContext = () => useContext<RouteContextProps>(routeContextInjectKey);
src/SiderMenu/BaseMenu.tsx
View file @ 2b556487
......@@ -11,14 +11,13 @@ import {
} from 'vue';
import { createFromIconfontCN } from '@ant-design/icons-vue';
import 'ant-design-vue/es/menu/style';
import Menu, { MenuProps } from 'ant-design-vue/es/menu';
import Menu from 'ant-design-vue/es/menu';
import defaultSettings, { PureSettings } from '../defaultSettings';
import { isImg, isUrl } from '../utils';
import { MenuMode, SelectInfo, OpenEventHandler } from './typings';
import { MenuDataItem, MenuTheme, FormatMessage, WithFalse } from '../typings';
import { PrivateSiderMenuProps } from './SiderMenu';
import './index.less';
import { useMenuState } from '../hooks/useMenu';
export { MenuMode, SelectInfo, OpenEventHandler };
......@@ -78,10 +77,10 @@ const renderTitle = (title: string | undefined, i18nRender: FormatMessage) => {
const renderMenuItem = (item: MenuDataItem, i18nRender: FormatMessage) => {
const meta = Object.assign({}, item.meta);
const target = meta.target || null;
const hasRemoteUrl = httpReg.test(item.path)
const hasRemoteUrl = httpReg.test(item.path);
const CustomTag: any = resolveComponent((target && 'a') || 'router-link');
const props = { to: { name: item.name } };
const attrs = (hasRemoteUrl || target) ? { href: item.path, target: target } : {};
const attrs = hasRemoteUrl || target ? { href: item.path, target: target } : {};
if (item.children && item.meta?.hideChildInMenu) {
// 把有子菜单的 并且 父菜单是要隐藏子菜单的
// 都给子菜单增加一个 hidden 属性
......
src/SiderMenu/SiderMenu.tsx
View file @ 2b556487
import { FunctionalComponent, computed, ref } from 'vue';
import { FunctionalComponent, computed } from 'vue';
import 'ant-design-vue/es/layout/style';
import Layout from 'ant-design-vue/es/layout';
import 'ant-design-vue/es/menu/style';
......@@ -114,7 +114,7 @@ const SiderMenu: FunctionalComponent<SiderMenuProps> = (props: SiderMenuProps) =
[`${baseClassName}-${navTheme}`]: true,
[`${baseClassName}-${props.layout}`]: true,
[`${baseClassName}-fixed`]: context.fixSiderbar,
}
};
});
// call menuHeaderRender
const headerDom = defaultRenderLogoAndTitle(props);
......
src/SiderMenu/index.tsx
View file @ 2b556487
......@@ -7,7 +7,7 @@ import SiderMenu, { SiderMenuProps, PrivateSiderMenuProps } from './SiderMenu';
export type SiderMenuWrapperProps = SiderMenuProps & Partial<PrivateSiderMenuProps>;
const SiderMenuWrapper: FunctionalComponent<SiderMenuWrapperProps> = (props, { attrs }) => {
const SiderMenuWrapper: FunctionalComponent<SiderMenuWrapperProps> = props => {
return props.isMobile ? (
<Drawer>
<SiderMenu {...props} />
......
src/TopNavHeader/index.tsx
View file @ 2b556487
import { ref, computed, FunctionalComponent } from "vue";
import { ref, computed, FunctionalComponent } from 'vue';
import {
SiderMenuProps,
defaultRenderLogoAndTitle,
......@@ -9,7 +9,7 @@ import { GlobalHeaderProps } from '../GlobalHeader';
import { default as ResizeObserver } from 'ant-design-vue/es/vc-resize-observer';
import './index.less';
import { useRouteContext } from "../RouteContext";
import { useRouteContext } from '../RouteContext';
export type TopNavHeaderProps = SiderMenuProps & GlobalHeaderProps & PrivateSiderMenuProps & {};
......@@ -38,14 +38,16 @@ const RightContent: FunctionalComponent<TopNavHeaderProps> = ({ rightContentRend
...props,
})}
</div>
) : rightContentRender}
) : (
rightContentRender
)}
</ResizeObserver>
</div>
</div>
);
};
export const TopNavHeader: FunctionalComponent<TopNavHeaderProps> = (props, { emit }) => {
export const TopNavHeader: FunctionalComponent<TopNavHeaderProps> = props => {
const headerRef = ref();
const {
prefixCls: propPrefixCls,
......@@ -53,7 +55,6 @@ export const TopNavHeader: FunctionalComponent<TopNavHeaderProps> = (props, { em
contentWidth,
rightContentRender,
layout,
...restProps
} = props;
const context = useRouteContext();
const prefixCls = `${propPrefixCls || 'ant-pro'}-top-nav-header`;
......@@ -65,39 +66,39 @@ export const TopNavHeader: FunctionalComponent<TopNavHeaderProps> = (props, { em
return {
[prefixCls]: true,
light: props.theme === 'light',
}
};
});
return (
<div class={className.value}>
<div ref={headerRef} class={`${prefixCls}-main ${contentWidth === 'Fixed' ? 'wide' : ''}`}>
{headerDom && (
<div class={`${prefixCls}-main-left`} onClick={onMenuHeaderClick}>
<div class={`${prefixCls}-logo`} key="logo" id="logo">
{headerDom}
<div ref={headerRef} class={`${prefixCls}-main ${contentWidth === 'Fixed' ? 'wide' : ''}`}>
{headerDom && (
<div class={`${prefixCls}-main-left`} onClick={onMenuHeaderClick}>
<div class={`${prefixCls}-logo`} key="logo" id="logo">
{headerDom}
</div>
</div>
)}
<div style={{ flex: 1 }} class={`${prefixCls}-menu`}>
<BaseMenu
theme={props.theme === 'realDark' ? 'dark' : props.theme}
mode={props.mode}
collapsed={props.collapsed}
menuData={context.menuData}
openKeys={context.openKeys}
selectedKeys={context.selectedKeys}
class={{ 'top-nav-menu': props.mode === 'horizontal' }}
{...{
'onUpdate:openKeys': ($event: string[]) => {
context.onOpenKeys($event);
},
'onUpdate:selectedKeys': ($event: any) => {
context.onSelectedKeys($event);
},
}}
/>
</div>
)}
<div style={{ flex: 1 }} class={`${prefixCls}-menu`}>
<BaseMenu
theme={props.theme === 'realDark' ? 'dark' : props.theme}
mode={props.mode}
collapsed={props.collapsed}
menuData={context.menuData}
openKeys={context.openKeys}
selectedKeys={context.selectedKeys}
class={{ 'top-nav-menu': props.mode === 'horizontal' }}
{...{
'onUpdate:openKeys': ($event: string[]) => {
context.onOpenKeys($event);
},
'onUpdate:selectedKeys': ($event: any) => {
context.onSelectedKeys($event);
},
}}
/>
{rightContentRender && <RightContent rightContentRender={rightContentRender} {...props} />}
</div>
{rightContentRender && <RightContent rightContentRender={rightContentRender} {...props} />}
</div>
</div>
)
);
};
src/WrapContent.tsx
View file @ 2b556487
......@@ -22,8 +22,8 @@ export const WrapContent: FunctionalComponent<WrapContentProps> = (props, { slot
return {
[`${prefixCls}-content`]: true,
[`${prefixCls}-has-header`]: true,
}
})
};
});
return (
<Content class={classNames.value} {...attrs}>
......
src/index.ts
View file @ 2b556487
......@@ -16,12 +16,9 @@ export {
default as BaseMenu,
BaseMenuProps,
MenuMode,
MenuState,
MenuStateWatched,
OpenEventHandler,
SelectInfo,
VueBaseMenuProps,
useMenuState,
} from './SiderMenu/BaseMenu';
export { default } from './BasicLayout';
yarn.lock
View file @ 2b556487
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment