Skip to content

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

fix: splitMenus

parent 52e61964
Expand all Hide 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 { createApp, defineComponent, onMounted, watch, ref, reactive } from 'vue';
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 { menus } from './menus';
import * as Icon from '@ant-design/icons-vue';
......@@ -21,7 +21,7 @@ const BasicLayout = defineComponent({
console.log('keys', keys);
state.selectedKeys = keys;
},
navTheme: 'dark',
isMobile: false,
fixSiderbar: false,
fixedHeader: false,
......@@ -57,7 +57,7 @@ const BasicLayout = defineComponent({
<ProLayout
v-model={[state.collapsed, 'collapsed']}
layout={'mix'}
navTheme={'light'}
navTheme={state.navTheme}
i18n={(key: string) => key}
isMobile={state.isMobile}
fixSiderbar={state.fixSiderbar}
......@@ -69,7 +69,7 @@ const BasicLayout = defineComponent({
splitMenus={state.splitMenus}
v-slots={{
rightContentRender: () => (
<div style="color: #FFF;margin-right: 16px;">
<div style="margin-right: 16px;">
<Avatar icon={<Icon.UserOutlined />} /> Sendya
</div>
),
......@@ -81,13 +81,24 @@ const BasicLayout = defineComponent({
),
}}
>
<Button
onClick={() => {
message.info('clicked.');
}}
>
Click Me!!
</Button>
<Space>
<Button
type="primary"
onClick={() => {
message.info('clicked.');
}}
>
Click Me!!
</Button>
<Button
onClick={() => {
state.navTheme = state.navTheme === 'light' ? 'dark' : 'light';
}}
>
Switch Theme
</Button>
</Space>
</ProLayout>
</RouteContextProvider>
);
......@@ -98,10 +109,7 @@ const SimpleDemo = {
setup() {
return () => (
<div class="components">
<h2># BasicLayout</h2>
<div>
<BasicLayout />
</div>
<BasicLayout />
</div>
);
},
......@@ -116,4 +124,4 @@ Object.keys(Icon)
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",
"version": "3.0.0-alpha.4",
"version": "3.0.0-alpha.5",
"main": "./lib/index.js",
"module": "./es/index.js",
"sideEffects": false,
......@@ -72,7 +72,7 @@
},
"dependencies": {
"@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",
"vue-types": "^3.0.1"
},
......
src/SiderMenu/SiderMenu.tsx
View file @ 91f5f097
......@@ -86,7 +86,6 @@ export const defaultRenderCollapsedButton = (collapsed?: boolean): RenderVNodeTy
const SiderMenu: FunctionalComponent<SiderMenuProps> = (props: SiderMenuProps) => {
const {
navTheme,
// menuData,
collapsed,
siderWidth,
......@@ -104,7 +103,7 @@ const SiderMenu: FunctionalComponent<SiderMenuProps> = (props: SiderMenuProps) =
// const isMix = computed(() => props.layout === 'mix');
// 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(() =>
props.collapsed ? props.collapsedWidth : props.siderWidth,
);
......@@ -112,7 +111,7 @@ const SiderMenu: FunctionalComponent<SiderMenuProps> = (props: SiderMenuProps) =
const classNames = computed(() => {
return {
[baseClassName]: true,
[`${baseClassName}-${navTheme}`]: true,
[`${baseClassName}-${runtimeTheme.value}`]: true,
[`${baseClassName}-${props.layout}`]: true,
[`${baseClassName}-fixed`]: context.fixSiderbar,
};
......@@ -129,7 +128,7 @@ const SiderMenu: FunctionalComponent<SiderMenuProps> = (props: SiderMenuProps) =
}
const defaultMenuDom = (
<BaseMenu
theme={navTheme === 'realDark' ? 'dark' : navTheme}
theme={runtimeTheme.value === 'realDark' ? 'dark' : runtimeTheme.value}
mode="inline"
menuData={hasSide.value ? flatMenuData.value : context.menuData}
collapsed={props.collapsed}
......@@ -165,7 +164,7 @@ const SiderMenu: FunctionalComponent<SiderMenuProps> = (props: SiderMenuProps) =
)}
<Sider
class={classNames.value}
theme={navTheme === 'realDark' ? 'dark' : navTheme}
theme={runtimeTheme.value === 'realDark' ? 'dark' : runtimeTheme.value}
width={siderWidth}
breakpoint={breakpoint || undefined}
collapsed={collapsed}
......@@ -185,7 +184,7 @@ const SiderMenu: FunctionalComponent<SiderMenuProps> = (props: SiderMenuProps) =
<Menu
class={`${baseClassName}-link-menu`}
inlineIndent={16}
theme={navTheme as 'light' | 'dark'}
theme={runtimeTheme.value as 'light' | 'dark'}
selectedKeys={[]}
openKeys={[]}
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';
@pro-layout-sider-menu-prefix-cls: ~'@{ant-prefix}-pro-sider';
......@@ -31,23 +31,23 @@
.@{ant-prefix}-menu-inline-collapsed > .@{ant-prefix}-menu-item .anticon + span,
.@{ant-prefix}-menu-inline-collapsed
> .@{ant-prefix}-menu-item-group
> .@{ant-prefix}-menu-item-group-list
> .@{ant-prefix}-menu-item
.anticon
+ span,
> .@{ant-prefix}-menu-item-group
> .@{ant-prefix}-menu-item-group-list
> .@{ant-prefix}-menu-item
.anticon
+ span,
.@{ant-prefix}-menu-inline-collapsed
> .@{ant-prefix}-menu-item-group
> .@{ant-prefix}-menu-item-group-list
> .@{ant-prefix}-menu-submenu
> .@{ant-prefix}-menu-submenu-title
.anticon
+ span,
> .@{ant-prefix}-menu-item-group
> .@{ant-prefix}-menu-item-group-list
> .@{ant-prefix}-menu-submenu
> .@{ant-prefix}-menu-submenu-title
.anticon
+ span,
.@{ant-prefix}-menu-inline-collapsed
> .@{ant-prefix}-menu-submenu
> .@{ant-prefix}-menu-submenu-title
.anticon
+ span {
> .@{ant-prefix}-menu-submenu
> .@{ant-prefix}-menu-submenu-title
.anticon
+ span {
display: none;
}
......@@ -148,16 +148,16 @@
.@{ant-prefix}-menu-inline-collapsed {
& > .@{ant-prefix}-menu-item .sider-menu-item-img + span,
&
> .@{ant-prefix}-menu-item-group
> .@{ant-prefix}-menu-item-group-list
> .@{ant-prefix}-menu-item
.sider-menu-item-img
+ span,
> .@{ant-prefix}-menu-item-group
> .@{ant-prefix}-menu-item-group-list
> .@{ant-prefix}-menu-item
.sider-menu-item-img
+ span,
&
> .@{ant-prefix}-menu-submenu
> .@{ant-prefix}-menu-submenu-title
.sider-menu-item-img
+ span {
> .@{ant-prefix}-menu-submenu
> .@{ant-prefix}-menu-submenu-title
.sider-menu-item-img
+ span {
display: inline-block;
max-width: 0;
opacity: 0;
......@@ -208,7 +208,7 @@
.@{ant-prefix}-menu-inline {
.@{ant-prefix}-menu-item,
.@{ant-prefix}-menu-submenu-title {
width: 100%;
// width: 100%;
}
}
......@@ -261,6 +261,10 @@
.anticon {
font-size: 16px;
}
> span::after {
content: '';
display: inline;
}
}
.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[] {
}
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 = {
......
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