github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix: menu arrow not work

pull/4671/head
tangjinzhou 2021-09-12 13:48:01 +08:00
parent a6f37debb1
commit 1ae0d519d3
6 changed files with 99 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
components/menu/src/Menu.tsx
View File

@ -346,7 +346,9 @@ export default defineComponent({
}; };
const lastVisibleIndex = ref(0); const lastVisibleIndex = ref(0);
const expandIcon: MenuProps['expandIcon'] = opt => { const expandIcon = computed<MenuProps['expandIcon']>(() =>
props.expandIcon || slots.expandIcon
? opt => {
let icon = props.expandIcon || slots.expandIcon; let icon = props.expandIcon || slots.expandIcon;
icon = typeof icon === 'function' ? icon(opt) : icon; icon = typeof icon === 'function' ? icon(opt) : icon;
return cloneElement( return cloneElement(
@ -356,7 +358,9 @@ export default defineComponent({
}, },
false, false,
); );
}; }
: null,
);
useProvideMenu({ useProvideMenu({
store, store,
prefixCls, prefixCls,

32
components/menu/src/SubMenu.tsx
View File

@ -230,11 +230,12 @@ export default defineComponent({
); );
return () => { return () => {
const icon = getPropsSlot(slots, props, 'icon');
const title = renderTitle(getPropsSlot(slots, props, 'title'), icon);
const subMenuPrefixClsValue = subMenuPrefixCls.value; const subMenuPrefixClsValue = subMenuPrefixCls.value;
const expandIcon = props.expandIcon || slots.expandIcon || menuExpandIcon; let baseTitleNode = () => {
let titleNode = ( const icon = getPropsSlot(slots, props, 'icon');
const expandIcon = props.expandIcon || slots.expandIcon || menuExpandIcon.value;
const title = renderTitle(getPropsSlot(slots, props, 'title'), icon);
return (
<div <div
style={directionStyle.value} style={directionStyle.value}
class={`${subMenuPrefixClsValue}-title`} class={`${subMenuPrefixClsValue}-title`}
@ -259,12 +260,12 @@ export default defineComponent({
)} )}
</div> </div>
); );
};
let titleNode = () => null;
if (!overflowDisabled.value && mode.value !== 'inline') { if (!overflowDisabled.value && mode.value !== 'inline') {
const triggerMode = triggerModeRef.value; titleNode = () => (
titleNode = (
<PopupTrigger <PopupTrigger
mode={triggerMode} mode={triggerModeRef.value}
prefixCls={subMenuPrefixClsValue} prefixCls={subMenuPrefixClsValue}
visible={!props.internalPopupClose && open.value} visible={!props.internalPopupClose && open.value}
popupClassName={popupClassName.value} popupClassName={popupClassName.value}
@ -283,13 +284,13 @@ export default defineComponent({
), ),
}} }}
> >
{titleNode} {baseTitleNode()}
</PopupTrigger> </PopupTrigger>
); );
} else { } else {
// 包裹一层，保持结构一致，防止动画丢失 // 包裹一层，保持结构一致，防止动画丢失
// https://github.com/vueComponent/ant-design-vue/issues/4325 // https://github.com/vueComponent/ant-design-vue/issues/4325
titleNode = <PopupTrigger>{titleNode}</PopupTrigger>; titleNode = () => <PopupTrigger>{baseTitleNode()}</PopupTrigger>;
} }
return ( return (
<MenuContextProvider mode={renderMode.value}> <MenuContextProvider mode={renderMode.value}>
@ -311,8 +312,10 @@ export default defineComponent({
onMouseenter={onMouseEnter} onMouseenter={onMouseEnter}
onMouseleave={onMouseLeave} onMouseleave={onMouseLeave}
data-submenu-id={key} data-submenu-id={key}
> v-slots={() => {
{titleNode} return (
<>
{titleNode()}
{/* Inline mode */} {/* Inline mode */}
{!overflowDisabled.value && ( {!overflowDisabled.value && (
@ -320,7 +323,10 @@ export default defineComponent({
{slots.default?.()} {slots.default?.()}
</InlineSubMenuList> </InlineSubMenuList>
)} )}
</Overflow.Item> </>
);
}}
></Overflow.Item>
</MenuContextProvider> </MenuContextProvider>
); );
}; };

2
components/menu/src/hooks/useMenuContext.ts
View File

@ -75,7 +75,7 @@ export interface MenuContextProps {
// // Icon // // Icon
// itemIcon?: RenderIconType; // itemIcon?: RenderIconType;
expandIcon?: (p?: { isOpen: boolean; [key: string]: any }) => any; expandIcon?: ComputedRef<(p?: { isOpen: boolean; [key: string]: any }) => any>;
// // Function // // Function
onItemClick: MenuClickEventHandler; onItemClick: MenuClickEventHandler;

23
components/vc-overflow/Item.tsx
View File

@ -71,7 +71,15 @@ export default defineComponent({
overflowProps['aria-hidden'] = true; overflowProps['aria-hidden'] = true;
} }
const itemNode = ( // 使用 disabled 避免结构不一致 导致子组件 rerender
return (
<ResizeObserver
disabled={!responsive}
onResize={({ offsetWidth }) => {
internalRegisterSize(offsetWidth);
}}
v-slots={{
default: () => (
<Component <Component
class={classNames(!invalidate && prefixCls)} class={classNames(!invalidate && prefixCls)}
style={overflowStyle} style={overflowStyle}
@ -81,18 +89,9 @@ export default defineComponent({
> >
{childNode} {childNode}
</Component> </Component>
); ),
// 使用 disabled 避免结构不一致 导致子组件 rerender
return (
<ResizeObserver
disabled={!responsive}
onResize={({ offsetWidth }) => {
internalRegisterSize(offsetWidth);
}} }}
> ></ResizeObserver>
{itemNode}
</ResizeObserver>
); );
}; };
}, },

33
components/vc-overflow/Overflow.tsx
View File

@ -302,7 +302,7 @@ const Overflow = defineComponent({
}; };
// >>>>> Rest node // >>>>> Rest node
let restNode: VueNode; let restNode = () => null;
const restContextProps = { const restContextProps = {
order: displayRest ? mergedDisplayCount.value : Number.MAX_SAFE_INTEGER, order: displayRest ? mergedDisplayCount.value : Number.MAX_SAFE_INTEGER,
className: `${itemPrefixCls.value}-rest`, className: `${itemPrefixCls.value}-rest`,
@ -313,19 +313,21 @@ const Overflow = defineComponent({
if (!renderRawRest) { if (!renderRawRest) {
const mergedRenderRest = renderRest || defaultRenderRest; const mergedRenderRest = renderRest || defaultRenderRest;
restNode = ( restNode = () => (
<Item <Item
{...itemSharedProps} {...itemSharedProps}
// When not show, order should be the last // When not show, order should be the last
{...restContextProps} {...restContextProps}
> v-slots={{
{typeof mergedRenderRest === 'function' default: () =>
typeof mergedRenderRest === 'function'
? mergedRenderRest(omittedItems.value) ? mergedRenderRest(omittedItems.value)
: mergedRenderRest} : mergedRenderRest,
</Item> }}
></Item>
); );
} else if (renderRawRest) { } else if (renderRawRest) {
restNode = ( restNode = () => (
<OverflowContextProvider <OverflowContextProvider
value={{ value={{
...itemSharedProps, ...itemSharedProps,
@ -337,7 +339,7 @@ const Overflow = defineComponent({
); );
} }
const overflowNode = ( const overflowNode = () => (
<Component <Component
class={classNames(!invalidate.value && prefixCls, className)} class={classNames(!invalidate.value && prefixCls, className)}
style={style} style={style}
@ -346,7 +348,7 @@ const Overflow = defineComponent({
{mergedData.value.map(internalRenderItemNode)} {mergedData.value.map(internalRenderItemNode)}
{/* Rest Count Item */} {/* Rest Count Item */}
{showRest.value ? restNode : null} {showRest.value ? restNode() : null}
{/* Suffix Node */} {/* Suffix Node */}
{suffix && ( {suffix && (
@ -357,17 +359,18 @@ const Overflow = defineComponent({
registerSize={registerSuffixSize} registerSize={registerSuffixSize}
display display
style={suffixStyle} style={suffixStyle}
> v-slots={{ default: () => suffix }}
{suffix} ></Item>
</Item>
)} )}
</Component> </Component>
); );
// 使用 disabled 避免结构不一致 导致子组件 rerender // 使用 disabled 避免结构不一致 导致子组件 rerender
return ( return (
<ResizeObserver disabled={!isResponsive.value} onResize={onOverflowResize}> <ResizeObserver
{overflowNode} disabled={!isResponsive.value}
</ResizeObserver> onResize={onOverflowResize}
v-slots={{ default: overflowNode }}
></ResizeObserver>
); );
}; };
}, },

5
components/vc-overflow/RawItem.tsx
View File

@ -35,9 +35,8 @@ export default defineComponent({
{...restContext} {...restContext}
{...restProps} {...restProps}
{...props} {...props}
> v-slots={slots}
{slots.default?.()} ></Item>
</Item>
</OverflowContextProvider> </OverflowContextProvider>
); );
}; };