Skip to content

P
pro-layout
Commit 91f5f097 authored by Sendya's avatar Sendya
Browse files
Options

fix: splitMenus

parent 52e61964
Expand all Show whitespace changes
Inline Side-by-side
Showing with 83 additions and 147 deletions
examples/index.html
View file @ 91f5f097
<html>
<head>
<link href="index.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="app">
<div></div>
</div>
</body>
<script src="index.js"></script>
</html>
\ No newline at end of file
examples/index.tsx
View file @ 91f5f097
import 'ant-design-vue/dist/antd.less'; import 'ant-design-vue/dist/antd.less';
import { createApp, defineComponent, onMounted, watch, ref, reactive } from 'vue'; import { createApp, defineComponent, onMounted, watch, ref, reactive } from 'vue';
import { RouterLink } from './mock-router'; import { RouterLink } from './mock-router';
import { Button, Avatar, message } from 'ant-design-vue'; import { Button, Avatar, Space, message } from 'ant-design-vue';
import { default as ProLayout } from '../src/'; import { default as ProLayout } from '../src/';
import { menus } from './menus'; import { menus } from './menus';
import * as Icon from '@ant-design/icons-vue'; import * as Icon from '@ant-design/icons-vue';
...@@ -21,7 +21,7 @@ const BasicLayout = defineComponent({ ...@@ -21,7 +21,7 @@ const BasicLayout = defineComponent({
console.log('keys', keys); console.log('keys', keys);
state.selectedKeys = keys; state.selectedKeys = keys;
}, },
navTheme: 'dark',
isMobile: false, isMobile: false,
fixSiderbar: false, fixSiderbar: false,
fixedHeader: false, fixedHeader: false,
...@@ -57,7 +57,7 @@ const BasicLayout = defineComponent({ ...@@ -57,7 +57,7 @@ const BasicLayout = defineComponent({
<ProLayout <ProLayout
v-model={[state.collapsed, 'collapsed']} v-model={[state.collapsed, 'collapsed']}
layout={'mix'} layout={'mix'}
navTheme={'light'} navTheme={state.navTheme}
i18n={(key: string) => key} i18n={(key: string) => key}
isMobile={state.isMobile} isMobile={state.isMobile}
fixSiderbar={state.fixSiderbar} fixSiderbar={state.fixSiderbar}
...@@ -69,7 +69,7 @@ const BasicLayout = defineComponent({ ...@@ -69,7 +69,7 @@ const BasicLayout = defineComponent({
splitMenus={state.splitMenus} splitMenus={state.splitMenus}
v-slots={{ v-slots={{
rightContentRender: () => ( rightContentRender: () => (
<div style="color: #FFF;margin-right: 16px;"> <div style="margin-right: 16px;">
<Avatar icon={<Icon.UserOutlined />} /> Sendya <Avatar icon={<Icon.UserOutlined />} /> Sendya
</div> </div>
), ),
...@@ -81,13 +81,24 @@ const BasicLayout = defineComponent({ ...@@ -81,13 +81,24 @@ const BasicLayout = defineComponent({
), ),
}} }}
> >
<Space>
<Button <Button
type="primary"
onClick={() => { onClick={() => {
message.info('clicked.'); message.info('clicked.');
}} }}
> >
Click Me!! Click Me!!
</Button> </Button>
<Button
onClick={() => {
state.navTheme = state.navTheme === 'light' ? 'dark' : 'light';
}}
>
Switch Theme
</Button>
</Space>
</ProLayout> </ProLayout>
</RouteContextProvider> </RouteContextProvider>
); );
...@@ -98,11 +109,8 @@ const SimpleDemo = { ...@@ -98,11 +109,8 @@ const SimpleDemo = {
setup() { setup() {
return () => ( return () => (
<div class="components"> <div class="components">
<h2># BasicLayout</h2>
<div>
<BasicLayout /> <BasicLayout />
</div> </div>
</div>
); );
}, },
}; };
...@@ -116,4 +124,4 @@ Object.keys(Icon) ...@@ -116,4 +124,4 @@ Object.keys(Icon)
app.component(Icon[k].displayName, Icon[k]); app.component(Icon[k].displayName, Icon[k]);
}); });
app.use(RouterLink).use(ProLayout).mount('#__vue-content>div'); app.use(RouterLink).use(ProLayout).mount('#app');
package.json
View file @ 91f5f097
{ {
"name": "@ant-design-vue/pro-layout", "name": "@ant-design-vue/pro-layout",
"version": "3.0.0-alpha.4", "version": "3.0.0-alpha.5",
"main": "./lib/index.js", "main": "./lib/index.js",
"module": "./es/index.js", "module": "./es/index.js",
"sideEffects": false, "sideEffects": false,
...@@ -72,7 +72,7 @@ ...@@ -72,7 +72,7 @@
}, },
"dependencies": { "dependencies": {
"@babel/runtime": "^7.11.2", "@babel/runtime": "^7.11.2",
"ant-design-vue": "^2.0.0-rc.5", "ant-design-vue": "^2.0.0-rc.8",
"lodash-es": "^4.17.20", "lodash-es": "^4.17.20",
"vue-types": "^3.0.1" "vue-types": "^3.0.1"
}, },
......
src/SiderMenu/SiderMenu.tsx
View file @ 91f5f097
...@@ -86,7 +86,6 @@ export const defaultRenderCollapsedButton = (collapsed?: boolean): RenderVNodeTy ...@@ -86,7 +86,6 @@ export const defaultRenderCollapsedButton = (collapsed?: boolean): RenderVNodeTy
const SiderMenu: FunctionalComponent<SiderMenuProps> = (props: SiderMenuProps) => { const SiderMenu: FunctionalComponent<SiderMenuProps> = (props: SiderMenuProps) => {
const { const {
navTheme,
// menuData, // menuData,
collapsed, collapsed,
siderWidth, siderWidth,
...@@ -104,7 +103,7 @@ const SiderMenu: FunctionalComponent<SiderMenuProps> = (props: SiderMenuProps) = ...@@ -104,7 +103,7 @@ const SiderMenu: FunctionalComponent<SiderMenuProps> = (props: SiderMenuProps) =
// const isMix = computed(() => props.layout === 'mix'); // const isMix = computed(() => props.layout === 'mix');
// const fixed = computed(() => context.fixSiderbar); // const fixed = computed(() => context.fixSiderbar);
// const runtimeTheme = computed(() => (props.layout === 'mix' && 'light') || 'dark'); const runtimeTheme = computed(() => (props.layout === 'mix' && 'light') || props.navTheme);
const runtimeSideWidth = computed(() => const runtimeSideWidth = computed(() =>
props.collapsed ? props.collapsedWidth : props.siderWidth, props.collapsed ? props.collapsedWidth : props.siderWidth,
); );
...@@ -112,7 +111,7 @@ const SiderMenu: FunctionalComponent<SiderMenuProps> = (props: SiderMenuProps) = ...@@ -112,7 +111,7 @@ const SiderMenu: FunctionalComponent<SiderMenuProps> = (props: SiderMenuProps) =
const classNames = computed(() => { const classNames = computed(() => {
return { return {
[baseClassName]: true, [baseClassName]: true,
[`${baseClassName}-${navTheme}`]: true, [`${baseClassName}-${runtimeTheme.value}`]: true,
[`${baseClassName}-${props.layout}`]: true, [`${baseClassName}-${props.layout}`]: true,
[`${baseClassName}-fixed`]: context.fixSiderbar, [`${baseClassName}-fixed`]: context.fixSiderbar,
}; };
...@@ -129,7 +128,7 @@ const SiderMenu: FunctionalComponent<SiderMenuProps> = (props: SiderMenuProps) = ...@@ -129,7 +128,7 @@ const SiderMenu: FunctionalComponent<SiderMenuProps> = (props: SiderMenuProps) =
} }
const defaultMenuDom = ( const defaultMenuDom = (
<BaseMenu <BaseMenu
theme={navTheme === 'realDark' ? 'dark' : navTheme} theme={runtimeTheme.value === 'realDark' ? 'dark' : runtimeTheme.value}
mode="inline" mode="inline"
menuData={hasSide.value ? flatMenuData.value : context.menuData} menuData={hasSide.value ? flatMenuData.value : context.menuData}
collapsed={props.collapsed} collapsed={props.collapsed}
...@@ -165,7 +164,7 @@ const SiderMenu: FunctionalComponent<SiderMenuProps> = (props: SiderMenuProps) = ...@@ -165,7 +164,7 @@ const SiderMenu: FunctionalComponent<SiderMenuProps> = (props: SiderMenuProps) =
)} )}
<Sider <Sider
class={classNames.value} class={classNames.value}
theme={navTheme === 'realDark' ? 'dark' : navTheme} theme={runtimeTheme.value === 'realDark' ? 'dark' : runtimeTheme.value}
width={siderWidth} width={siderWidth}
breakpoint={breakpoint || undefined} breakpoint={breakpoint || undefined}
collapsed={collapsed} collapsed={collapsed}
...@@ -185,7 +184,7 @@ const SiderMenu: FunctionalComponent<SiderMenuProps> = (props: SiderMenuProps) = ...@@ -185,7 +184,7 @@ const SiderMenu: FunctionalComponent<SiderMenuProps> = (props: SiderMenuProps) =
<Menu <Menu
class={`${baseClassName}-link-menu`} class={`${baseClassName}-link-menu`}
inlineIndent={16} inlineIndent={16}
theme={navTheme as 'light' | 'dark'} theme={runtimeTheme.value as 'light' | 'dark'}
selectedKeys={[]} selectedKeys={[]}
openKeys={[]} openKeys={[]}
mode="inline" mode="inline"
......
src/SiderMenu/index.less
View file @ 91f5f097
@import "~ant-design-vue/es/style/themes/default.less"; @import '~ant-design-vue/es/style/themes/default.less';
@import '../BasicLayout.less'; @import '../BasicLayout.less';
@pro-layout-sider-menu-prefix-cls: ~'@{ant-prefix}-pro-sider'; @pro-layout-sider-menu-prefix-cls: ~'@{ant-prefix}-pro-sider';
...@@ -208,7 +208,7 @@ ...@@ -208,7 +208,7 @@
.@{ant-prefix}-menu-inline { .@{ant-prefix}-menu-inline {
.@{ant-prefix}-menu-item, .@{ant-prefix}-menu-item,
.@{ant-prefix}-menu-submenu-title { .@{ant-prefix}-menu-submenu-title {
width: 100%; // width: 100%;
} }
} }
...@@ -261,6 +261,10 @@ ...@@ -261,6 +261,10 @@
.anticon { .anticon {
font-size: 16px; font-size: 16px;
} }
> span::after {
content: '';
display: inline;
}
} }
.top-nav-menu li.@{ant-prefix}-menu-item { .top-nav-menu li.@{ant-prefix}-menu-item {
......
src/utils/index.ts
View file @ 91f5f097
...@@ -63,7 +63,7 @@ export function flatMap(menusData: MenuDataItem[]): MenuDataItem[] { ...@@ -63,7 +63,7 @@ export function flatMap(menusData: MenuDataItem[]): MenuDataItem[] {
} }
export function getMenuFirstChildren(menus: MenuDataItem[], key: string) { export function getMenuFirstChildren(menus: MenuDataItem[], key: string) {
return (menus[menus.findIndex(menu => menu.path === key)] || {}).children; return (menus[menus.findIndex(menu => menu.path === key)] || {}).children || [];
} }
export const PropRenderType = { export const PropRenderType = {
......
yarn.lock
View file @ 91f5f097
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