Skip to content

Commit

Permalink
fix: BaseMenu menu-item class
Browse files Browse the repository at this point in the history
  • Loading branch information
sendya committed Feb 23, 2021
1 parent 32ebd12 commit bd09ee3
Show file tree
Hide file tree
Showing 3 changed files with 42 additions and 27 deletions.
54 changes: 32 additions & 22 deletions examples/index.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import 'ant-design-vue/dist/antd.less';
import { createApp, defineComponent, watch, ref } from 'vue';
import { createApp, defineComponent, watch, ref, watchEffect, onMounted } from 'vue';
import { createRouter, createWebHashHistory, useRoute, useRouter, RouteRecord } from 'vue-router';
import { Avatar } from 'ant-design-vue';
import { UserOutlined } from '@ant-design/icons-vue';
Expand Down Expand Up @@ -30,22 +30,36 @@ const BasicLayout = defineComponent({
const menuData = getMenuData(getRoutes());
globalState.menuData = menuData;

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',
},
);
const updateSelectedMenu = () => {
const matched = route.matched.concat().map(item => item.path);
matched.shift();
state.selectedKeys = matched;
};

onMounted(() => {
// if sider collapsed, set openKeys is null.
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',
},
);

// watch route
watchEffect(() => {
updateSelectedMenu();
});
});

return () => (
<RouteContextProvider value={state}>
Expand All @@ -67,11 +81,7 @@ const BasicLayout = defineComponent({
{...{
'onUpdate:collapsed': $event => (state.collapsed = $event),
'onUpdate:openKeys': $event => (state.openKeys = $event),
'onUpdate:selectedKeys': () => {
const matched = route.matched.concat().map(item => item.path);
matched.shift();
state.selectedKeys = matched;
},
'onUpdate:selectedKeys': updateSelectedMenu,
}}
v-slots={{
rightContentRender: () => (
Expand Down
8 changes: 4 additions & 4 deletions src/SiderMenu/BaseMenu.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -167,12 +167,12 @@ class MenuUtil {
const { prefixCls, i18n } = this.props;
const menuTitle = (i18n && i18n(item.meta?.title)) || item.meta?.title;
const defaultTitle = item?.meta.icon ? (
<span class={`${prefixCls}-menu-item`}>
<CustomTag {...attrs} {...props}>
<CustomTag {...attrs} {...props}>
<span class={`${prefixCls}-menu-item`}>
{!isChildren && <LazyIcon icon={item.meta.icon} />}
<span class={`${prefixCls}-menu-item-title`}>{menuTitle}</span>
</CustomTag>
</span>
</span>
</CustomTag>
) : (
<span class={`${prefixCls}-menu-item`}>{menuTitle}</span>
);
Expand Down
7 changes: 6 additions & 1 deletion src/SiderMenu/index.less
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@
position: relative;
background-color: @layout-sider-background;
border-right: 0;
transition: background-color 0.3s;
transition: background-color 0.3s, min-width 0.3s,
max-width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
z-index: 9;

&.@{ant-prefix}-menu-vertical .@{ant-prefix}-menu-item:not(:last-child),
Expand Down Expand Up @@ -108,6 +109,10 @@
z-index: 10;
min-height: 100%;
box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);

span.@{ant-prefix}-pro-menu-item-title {
transition: none;
}
}

.@{ant-prefix}-layout-sider-children {
Expand Down

0 comments on commit bd09ee3

Please sign in to comment.