59 lines
1.7 KiB
Vue
59 lines
1.7 KiB
Vue
import type { CSSProperties } from 'vue';
|
|
import { defineComponent, ref, Transition } from 'vue';
|
|
import { flattenChildren } from '../../_util/props-util';
|
|
import classNames from '../../_util/classNames';
|
|
import type { MobilePopupProps } from './interface';
|
|
import { mobileProps } from './interface';
|
|
|
|
export default defineComponent({
|
|
name: 'MobilePopupInner',
|
|
inheritAttrs: false,
|
|
props: mobileProps,
|
|
emits: ['mouseenter', 'mouseleave', 'mousedown', 'touchstart', 'align'],
|
|
setup(props, { expose, slots }) {
|
|
const elementRef = ref<HTMLDivElement>();
|
|
|
|
expose({
|
|
forceAlign: () => {},
|
|
getElement: () => elementRef.value,
|
|
});
|
|
|
|
return () => {
|
|
const {
|
|
zIndex,
|
|
visible,
|
|
prefixCls,
|
|
mobile: { popupClassName, popupStyle, popupMotion = {}, popupRender } = {},
|
|
} = props as MobilePopupProps;
|
|
// ======================== Render ========================
|
|
const mergedStyle: CSSProperties = {
|
|
zIndex,
|
|
...popupStyle,
|
|
};
|
|
|
|
let childNode: any = flattenChildren(slots.default?.());
|
|
|
|
// Wrapper when multiple children
|
|
if (childNode.length > 1) {
|
|
childNode = <div class={`${prefixCls}-content`}>{childNode}</div>;
|
|
}
|
|
|
|
// Mobile support additional render
|
|
if (popupRender) {
|
|
childNode = popupRender(childNode);
|
|
}
|
|
|
|
const mergedClassName = classNames(prefixCls, popupClassName);
|
|
return (
|
|
<Transition ref={elementRef} {...popupMotion}>
|
|
{visible ? (
|
|
<div class={mergedClassName} style={mergedStyle}>
|
|
{childNode}
|
|
</div>
|
|
) : null}
|
|
</Transition>
|
|
);
|
|
};
|
|
},
|
|
});
|