fix: menu arrow not work
tangjinzhou
parent
a6f37debb1
commit
1ae0d519d3
|
|
@ -346,17 +346,21 @@ export default defineComponent({
|
|||
};
|
||||
|
||||
const lastVisibleIndex = ref(0);
|
||||
const expandIcon: MenuProps['expandIcon'] = opt => {
|
||||
let icon = props.expandIcon || slots.expandIcon;
|
||||
icon = typeof icon === 'function' ? icon(opt) : icon;
|
||||
return cloneElement(
|
||||
icon,
|
||||
{
|
||||
class: `${prefixCls.value}-submenu-expand-icon`,
|
||||
},
|
||||
false,
|
||||
);
|
||||
};
|
||||
const expandIcon = computed<MenuProps['expandIcon']>(() =>
|
||||
props.expandIcon || slots.expandIcon
|
||||
? opt => {
|
||||
let icon = props.expandIcon || slots.expandIcon;
|
||||
icon = typeof icon === 'function' ? icon(opt) : icon;
|
||||
return cloneElement(
|
||||
icon,
|
||||
{
|
||||
class: `${prefixCls.value}-submenu-expand-icon`,
|
||||
},
|
||||
false,
|
||||
);
|
||||
}
|
||||
: null,
|
||||
);
|
||||
useProvideMenu({
|
||||
store,
|
||||
prefixCls,
|
||||
|
|
|
|||
|
|
@ -230,41 +230,42 @@ export default defineComponent({
|
|||
);
|
||||
|
||||
return () => {
|
||||
const icon = getPropsSlot(slots, props, 'icon');
|
||||
const title = renderTitle(getPropsSlot(slots, props, 'title'), icon);
|
||||
const subMenuPrefixClsValue = subMenuPrefixCls.value;
|
||||
const expandIcon = props.expandIcon || slots.expandIcon || menuExpandIcon;
|
||||
let titleNode = (
|
||||
<div
|
||||
style={directionStyle.value}
|
||||
class={`${subMenuPrefixClsValue}-title`}
|
||||
tabindex={mergedDisabled.value ? null : -1}
|
||||
ref={elementRef}
|
||||
title={typeof title === 'string' ? title : null}
|
||||
data-menu-id={key}
|
||||
aria-expanded={open.value}
|
||||
aria-haspopup
|
||||
aria-controls={popupId}
|
||||
aria-disabled={mergedDisabled.value}
|
||||
onClick={onInternalTitleClick}
|
||||
onFocus={onInternalFocus}
|
||||
>
|
||||
{title}
|
||||
|
||||
{/* Only non-horizontal mode shows the icon */}
|
||||
{mode.value !== 'horizontal' && expandIcon ? (
|
||||
expandIcon({ ...props, isOpen: open.value })
|
||||
) : (
|
||||
<i class={`${subMenuPrefixClsValue}-arrow`} />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
let baseTitleNode = () => {
|
||||
const icon = getPropsSlot(slots, props, 'icon');
|
||||
const expandIcon = props.expandIcon || slots.expandIcon || menuExpandIcon.value;
|
||||
const title = renderTitle(getPropsSlot(slots, props, 'title'), icon);
|
||||
return (
|
||||
<div
|
||||
style={directionStyle.value}
|
||||
class={`${subMenuPrefixClsValue}-title`}
|
||||
tabindex={mergedDisabled.value ? null : -1}
|
||||
ref={elementRef}
|
||||
title={typeof title === 'string' ? title : null}
|
||||
data-menu-id={key}
|
||||
aria-expanded={open.value}
|
||||
aria-haspopup
|
||||
aria-controls={popupId}
|
||||
aria-disabled={mergedDisabled.value}
|
||||
onClick={onInternalTitleClick}
|
||||
onFocus={onInternalFocus}
|
||||
>
|
||||
{title}
|
||||
|
||||
{/* Only non-horizontal mode shows the icon */}
|
||||
{mode.value !== 'horizontal' && expandIcon ? (
|
||||
expandIcon({ ...props, isOpen: open.value })
|
||||
) : (
|
||||
<i class={`${subMenuPrefixClsValue}-arrow`} />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
let titleNode = () => null;
|
||||
if (!overflowDisabled.value && mode.value !== 'inline') {
|
||||
const triggerMode = triggerModeRef.value;
|
||||
titleNode = (
|
||||
titleNode = () => (
|
||||
<PopupTrigger
|
||||
mode={triggerMode}
|
||||
mode={triggerModeRef.value}
|
||||
prefixCls={subMenuPrefixClsValue}
|
||||
visible={!props.internalPopupClose && open.value}
|
||||
popupClassName={popupClassName.value}
|
||||
|
|
@ -283,13 +284,13 @@ export default defineComponent({
|
|||
),
|
||||
}}
|
||||
>
|
||||
{titleNode}
|
||||
{baseTitleNode()}
|
||||
</PopupTrigger>
|
||||
);
|
||||
} else {
|
||||
// 包裹一层，保持结构一致，防止动画丢失
|
||||
// https://github.com/vueComponent/ant-design-vue/issues/4325
|
||||
titleNode = <PopupTrigger>{titleNode}</PopupTrigger>;
|
||||
titleNode = () => <PopupTrigger>{baseTitleNode()}</PopupTrigger>;
|
||||
}
|
||||
return (
|
||||
<MenuContextProvider mode={renderMode.value}>
|
||||
|
|
@ -311,16 +312,21 @@ export default defineComponent({
|
|||
onMouseenter={onMouseEnter}
|
||||
onMouseleave={onMouseLeave}
|
||||
data-submenu-id={key}
|
||||
>
|
||||
{titleNode}
|
||||
v-slots={() => {
|
||||
return (
|
||||
<>
|
||||
{titleNode()}
|
||||
|
||||
{/* Inline mode */}
|
||||
{!overflowDisabled.value && (
|
||||
<InlineSubMenuList id={popupId} open={open.value} keyPath={keysPath.value}>
|
||||
{slots.default?.()}
|
||||
</InlineSubMenuList>
|
||||
)}
|
||||
</Overflow.Item>
|
||||
{/* Inline mode */}
|
||||
{!overflowDisabled.value && (
|
||||
<InlineSubMenuList id={popupId} open={open.value} keyPath={keysPath.value}>
|
||||
{slots.default?.()}
|
||||
</InlineSubMenuList>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}}
|
||||
></Overflow.Item>
|
||||
</MenuContextProvider>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -75,7 +75,7 @@ export interface MenuContextProps {
|
|||
|
||||
// // Icon
|
||||
// itemIcon?: RenderIconType;
|
||||
expandIcon?: (p?: { isOpen: boolean; [key: string]: any }) => any;
|
||||
expandIcon?: ComputedRef<(p?: { isOpen: boolean; [key: string]: any }) => any>;
|
||||
|
||||
// // Function
|
||||
onItemClick: MenuClickEventHandler;
|
||||
|
|
|
|||
|
|
@ -71,18 +71,6 @@ export default defineComponent({
|
|||
overflowProps['aria-hidden'] = true;
|
||||
}
|
||||
|
||||
const itemNode = (
|
||||
<Component
|
||||
class={classNames(!invalidate && prefixCls)}
|
||||
style={overflowStyle}
|
||||
{...overflowProps}
|
||||
{...restProps}
|
||||
ref={itemNodeRef}
|
||||
>
|
||||
{childNode}
|
||||
</Component>
|
||||
);
|
||||
|
||||
// 使用 disabled 避免结构不一致 导致子组件 rerender
|
||||
return (
|
||||
<ResizeObserver
|
||||
|
|
@ -90,9 +78,20 @@ export default defineComponent({
|
|||
onResize={({ offsetWidth }) => {
|
||||
internalRegisterSize(offsetWidth);
|
||||
}}
|
||||
>
|
||||
{itemNode}
|
||||
</ResizeObserver>
|
||||
v-slots={{
|
||||
default: () => (
|
||||
<Component
|
||||
class={classNames(!invalidate && prefixCls)}
|
||||
style={overflowStyle}
|
||||
{...overflowProps}
|
||||
{...restProps}
|
||||
ref={itemNodeRef}
|
||||
>
|
||||
{childNode}
|
||||
</Component>
|
||||
),
|
||||
}}
|
||||
></ResizeObserver>
|
||||
);
|
||||
};
|
||||
},
|
||||
|
|
|
|||
|
|
@ -302,7 +302,7 @@ const Overflow = defineComponent({
|
|||
};
|
||||
|
||||
// >>>>> Rest node
|
||||
let restNode: VueNode;
|
||||
let restNode = () => null;
|
||||
const restContextProps = {
|
||||
order: displayRest ? mergedDisplayCount.value : Number.MAX_SAFE_INTEGER,
|
||||
className: `${itemPrefixCls.value}-rest`,
|
||||
|
|
@ -313,19 +313,21 @@ const Overflow = defineComponent({
|
|||
if (!renderRawRest) {
|
||||
const mergedRenderRest = renderRest || defaultRenderRest;
|
||||
|
||||
restNode = (
|
||||
restNode = () => (
|
||||
<Item
|
||||
{...itemSharedProps}
|
||||
// When not show, order should be the last
|
||||
{...restContextProps}
|
||||
>
|
||||
{typeof mergedRenderRest === 'function'
|
||||
? mergedRenderRest(omittedItems.value)
|
||||
: mergedRenderRest}
|
||||
</Item>
|
||||
v-slots={{
|
||||
default: () =>
|
||||
typeof mergedRenderRest === 'function'
|
||||
? mergedRenderRest(omittedItems.value)
|
||||
: mergedRenderRest,
|
||||
}}
|
||||
></Item>
|
||||
);
|
||||
} else if (renderRawRest) {
|
||||
restNode = (
|
||||
restNode = () => (
|
||||
<OverflowContextProvider
|
||||
value={{
|
||||
...itemSharedProps,
|
||||
|
|
@ -337,7 +339,7 @@ const Overflow = defineComponent({
|
|||
);
|
||||
}
|
||||
|
||||
const overflowNode = (
|
||||
const overflowNode = () => (
|
||||
<Component
|
||||
class={classNames(!invalidate.value && prefixCls, className)}
|
||||
style={style}
|
||||
|
|
@ -346,7 +348,7 @@ const Overflow = defineComponent({
|
|||
{mergedData.value.map(internalRenderItemNode)}
|
||||
|
||||
{/* Rest Count Item */}
|
||||
{showRest.value ? restNode : null}
|
||||
{showRest.value ? restNode() : null}
|
||||
|
||||
{/* Suffix Node */}
|
||||
{suffix && (
|
||||
|
|
@ -357,17 +359,18 @@ const Overflow = defineComponent({
|
|||
registerSize={registerSuffixSize}
|
||||
display
|
||||
style={suffixStyle}
|
||||
>
|
||||
{suffix}
|
||||
</Item>
|
||||
v-slots={{ default: () => suffix }}
|
||||
></Item>
|
||||
)}
|
||||
</Component>
|
||||
);
|
||||
// 使用 disabled 避免结构不一致 导致子组件 rerender
|
||||
return (
|
||||
<ResizeObserver disabled={!isResponsive.value} onResize={onOverflowResize}>
|
||||
{overflowNode}
|
||||
</ResizeObserver>
|
||||
<ResizeObserver
|
||||
disabled={!isResponsive.value}
|
||||
onResize={onOverflowResize}
|
||||
v-slots={{ default: overflowNode }}
|
||||
></ResizeObserver>
|
||||
);
|
||||
};
|
||||
},
|
||||
|
|
|
|||
|
|
@ -35,9 +35,8 @@ export default defineComponent({
|
|||
{...restContext}
|
||||
{...restProps}
|
||||
{...props}
|
||||
>
|
||||
{slots.default?.()}
|
||||
</Item>
|
||||
v-slots={slots}
|
||||
></Item>
|
||||
</OverflowContextProvider>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue