You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
55 lines
1.4 KiB
55 lines
1.4 KiB
import { defineComponent, ref, watch } from 'vue';
|
|
import { popupProps } from './interface';
|
|
import Mask from './Mask';
|
|
import MobilePopupInner from './MobilePopupInner';
|
|
import PopupInner from './PopupInner';
|
|
|
|
export default defineComponent({
|
|
name: 'Popup',
|
|
inheritAttrs: false,
|
|
props: popupProps,
|
|
setup(props, { attrs, slots, expose }) {
|
|
const innerVisible = ref(false);
|
|
const inMobile = ref(false);
|
|
const popupRef = ref();
|
|
watch(
|
|
[() => props.visible, () => props.mobile],
|
|
() => {
|
|
innerVisible.value = props.visible;
|
|
if (props.visible && props.mobile) {
|
|
inMobile.value = true;
|
|
}
|
|
},
|
|
{ immediate: true, flush: 'post' },
|
|
);
|
|
expose({
|
|
forceAlign: () => {
|
|
popupRef.value?.forceAlign();
|
|
},
|
|
getElement: () => {
|
|
return popupRef.value?.getElement();
|
|
},
|
|
});
|
|
return () => {
|
|
const cloneProps = { ...props, ...attrs, visible: innerVisible.value };
|
|
const popupNode = inMobile.value ? (
|
|
<MobilePopupInner
|
|
{...cloneProps}
|
|
mobile={props.mobile}
|
|
ref={popupRef}
|
|
v-slots={{ default: slots.default }}
|
|
></MobilePopupInner>
|
|
) : (
|
|
<PopupInner {...cloneProps} ref={popupRef} v-slots={{ default: slots.default }} />
|
|
);
|
|
|
|
return (
|
|
<div>
|
|
<Mask {...cloneProps} />
|
|
{popupNode}
|
|
</div>
|
|
);
|
|
};
|
|
},
|
|
});
|