plain-design 1.0.0-beta.4 → 1.0.0-beta.6

package/src/packages/components/usePopup/PopupItem.tsx

@@ -1,394 +1,394 @@
-import {designComponent, getComponentCls, iHTMLDivElement, iHTMLElement, iTransitionEvent, nextIndex, onBeforeUnmount, onMounted, Portal, PropType, reactive, SimpleFunction, useClassCache, useRefs, useStyleCache} from "plain-design-composition";
-import {ePopupAnimation, iPopupOption, iPopupRefs, PopupItemProvide} from "./utils/popup.utils";
-import {createEffects} from "plain-utils/utils/createEffects";
-import {delay} from "plain-utils/utils/delay";
-import './popup-item.scss';
-import {PopupManager} from "./usePopupManager";
-import {refreshPopup} from "./refresh/refreshPopup";
-import {getBoundary} from "./utils/getBoundary";
-import {useWatchAutoClear} from "../../utils/watchEffectAutoClear";
-import {getElementParents} from "../../utils/getElementParents";
-import {usePopupTrigger} from "./trigger/usePopupTrigger";
-import {APPLICATION_SERVICE_CONTAINER_CLASS} from "../Application/utils/application.utils";
-import {doNothing} from "../../utils/doNothing";
-import {unit} from "plain-utils/string/unit";
-import ApplicationConfigurationProvider from "../ApplicationConfigurationProvider";
-
-export const PopupItem = designComponent({
-  name: 'popup-item',
-  props: {
-    option: { type: Object as PropType<iPopupOption>, required: true },
-  },
-  slots: ['default'],
-  setup({ props: _props, slots }) {
-
-    /**
-     * popup item在销毁前需要清理的副作用
-     * @author  韦胜健
-     * @date    2023/5/16 17:09
-     */
-    const { effects } = createEffects();
-
-    const application = ApplicationConfigurationProvider.inject();
-    /**
-     * 内部节点的引用
-     * @author  韦胜健
-     * @date    2023/5/16 17:09
-     */
-    const { refs, onRef } = useRefs({ popup: iHTMLDivElement, content: iHTMLDivElement, arrow: iHTMLDivElement, body: iHTMLElement });
-
-    const manager = PopupManager.inject()!;
-
-    const state = reactive({
-      /**
-       * 当前popup item对应的option对象，不可以通过props.option来更新，必须调用manager.methods.update手动更新
-       * @author  韦胜健
-       * @date    2023/5/16 17:09
-       */
-      option: _props.option,
-      /**
-       * 当前popup-item是否显示
-       * @author  韦胜健
-       * @date    2023/5/16 17:10
-       */
-      isShow: false,
-      /**
-       * 标识，当popup挂载完更新完定位之后标识为ture，在为false的情况下禁用popup内部所有节点的transition过度动画以及opacity为0， 避免挂载的一瞬间显示在左上角的问题；
-       * @author  韦胜健
-       * @date    2023/5/16 17:11
-       */
-      isAnimationReady: false,
-      /**
-       * 层级
-       * @author  韦胜健
-       * @date    2023/5/17 18:47
-       */
-      zIndex: nextIndex(),
-    });
-
-    const classes = useClassCache(() => [
-      state.option.popperClass,
-      state.option.externalClass,
-      getComponentCls('popup-item'),
-      `popup-item-size-${state.option.size}`,
-      `popup-item-animation-${state.option.animation}`,
-      {
-        'popup-item-cover': state.option.cover,
-        'popup-item-no-padding': state.option.noPadding,
-        'popup-item-no-background': state.option.noBackground,
-        'popup-item-no-border': state.option.noBorder,
-        'popup-item-no-transition': state.option.noTransition,
-        'popup-item-animation-ready': state.isAnimationReady,
-        'popup-item-is-dark': !application.value.theme.dark && !state.option.status && !!state.option.dark,
-        [`popup-item-status-${state.option.status}`]: !!state.option.status,
-        'popup-item-dark-app': application.value.theme.dark,
-      }
-    ]);
-
-    const styles = useStyleCache((styles) => {
-      styles.zIndex = state.zIndex;
-    });
-
-    const contentStyles = useStyleCache((styles) => {
-      const { minWidth, minHeight, height, width } = state.option;
-      if (!!minWidth) {styles.minWidth = unit(minWidth);}
-      if (!!minHeight) {styles.minHeight = unit(minHeight);}
-      if (!!height) {styles.height = unit(height);}
-      if (!!width) {styles.width = unit(width);}
-    });
-
-    const methods = {
-      /**
-       * 刷新定位
-       * @author  韦胜健
-       * @date    2023/5/16 17:11
-       */
-      refresh: (() => {
-
-        /*真实的刷新定位动作*/
-        const _refresh = (transformLocation?: boolean) => {
-
-          if (!refs.popup) {
-            manager.methods.remove(state.option.id);
-            return;
-          }
-
-          const popupRefs: iPopupRefs = {
-            directionReference: state.option.stickyReference || state.option.reference,
-            alignReference: state.option.reference,
-            boundary: getBoundary(state.option.boundary),
-            popupEl: refs.popup!,
-            popupContent: refs.content!,
-            popupArrow: refs.arrow || null,
-          };
-
-          if (!!state.option.boundary && !popupRefs.boundary) {
-            console.warn(`can't find boundary element:${state.option.boundary}`);
-          }
-
-          if (!popupRefs.directionReference) {
-            console.warn('no popupRefs.directionReference');
-            return;
-          }
-          if (!popupRefs.alignReference) {
-            console.warn('no popupRefs.alignReference');
-            return;
-          }
-          if (!popupRefs.popupEl) {
-            console.warn('no popupRefs.popupEl');
-            return;
-          }
-          if (!manager.methods.isShow(state.option) && manager.methods.isOpen(state.option)) {
-            /*准备关闭*/
-            return;
-          }
-
-          refreshPopup({
-            transformLocation: !!transformLocation,
-            refs: popupRefs,
-            option: {
-              ...state.option,
-              ...(() => {
-                const arrowSize = state.option.noArrow ? 0 : state.option.arrowSize;
-                const offset = (arrowSize || 0) + state.option.offset;
-                return { arrowSize, offset };
-              })()
-            },
-          });
-
-        };
-
-        let hookEffects: SimpleFunction[] = [];
-
-        const doRefresh = (transformLocation?: boolean) => {
-          hookEffects.forEach(i => i());
-          hookEffects = [];
-          _refresh(transformLocation);
-        };
-
-        return (transformLocation?: boolean) => {
-          if (state.option.animation !== ePopupAnimation.slide) {
-            doRefresh(transformLocation);
-          } else {
-            if (manager.methods.isShow(state.option) === manager.methods.isOpen(state.option)) {
-              /*当前show与open一致，没有过渡动画，直接刷新定位*/
-              doRefresh(transformLocation);
-            } else {
-              /*当前show与open不一致，处于过渡动画中，等动画结束再刷新定位*/
-              hookEffects.push(manager.hooks.onPopupItemOpen.use(() => {doRefresh(transformLocation);}));
-              hookEffects.push(manager.hooks.onPopupItemClose.use(() => {doRefresh(transformLocation);}));
-            }
-          }
-        };
-      })(),
-      /**
-       * 使用transform的方式刷新定位
-       * @author  韦胜健
-       * @date    2023/5/16 17:11
-       */
-      transformRefresh: (() => {
-        let timer: any;
-        return () => {
-          if (!!timer) {
-            clearTimeout(timer);
-            timer = null;
-          }
-          methods.refresh(true);
-          timer = setTimeout(() => {
-            methods.refresh();
-          }, 100);
-        };
-      })(),
-      /**
-       * 显示popup-item
-       * @author  韦胜健
-       * @date    2023/5/16 17:11
-       */
-      show: async () => {
-        if (state.isShow) {return;}
-        const flag = state.option.beforeShow?.();
-        if (flag === false) {return;}
-        state.zIndex = nextIndex();
-        state.isShow = true;
-        await manager.hooks.onPopupItemShow.exec(state.option);
-      },
-      /**
-       * 隐藏popup-item
-       * @author  韦胜健
-       * @date    2023/5/16 17:12
-       */
-      hide: async () => {
-        if (!state.isShow) {return;}
-        const flag = state.option.beforeHide?.();
-        if (flag === false) {return;}
-        state.isShow = false;
-        await manager.hooks.onPopupItemHide.exec(state.option);
-      },
-    };
-
-    const handler = {
-      /**
-       * 监听动画结束动作，派发open/close事件
-       * @author  韦胜健
-       * @date    2023/5/16 17:12
-       */
-      onTransitionend: (() => {
-        let timer: any;
-        const check = (e: iTransitionEvent) => {
-
-          let isMatch = false;
-
-          switch (state.option.animation) {
-            case ePopupAnimation.slide:
-              /*slide动画的时候，动画主体是[content]节点*/
-              if (e.target === refs.content && e.propertyName === 'transform') {isMatch = true;}
-              break;
-            case ePopupAnimation.scale:
-              /*scale动画的时候，动画主体是[body]节点，动画主体不能设置为el节点，因为设置为el节点的话会导致获取的定位信息在缩放的情况下不准确*/
-              if (e.target === refs.body && e.propertyName === 'transform') {isMatch = true;}
-              break;
-            default:
-              /*其他动画的时候，主体是[el]节点*/
-              if (e.target === refs.popup) {isMatch = true;}
-          }
-
-          if (isMatch) {
-            if (!!timer) {clearTimeout(timer);}
-            timer = setTimeout(() => {
-              timer = null;
-              state.isShow ? manager.hooks.onPopupItemOpen.exec(state.option) : manager.hooks.onPopupItemClose.exec(state.option);
-            }, 0);
-          }
-        };
-        return check;
-      })(),
-    };
-
-    onMounted(async () => {
-      await delay();
-      await methods.refresh();
-      state.isAnimationReady = true;
-      await methods.show();
-    });
-
-    [
-      /*通过manager控制popup-item显示*/
-      manager.hooks.onCallShowPopup.use((option) => {option.id === state.option.id && methods.show();}),
-      /*通过manager控制popup-item隐藏*/
-      manager.hooks.onCallHidePopup.use((idMap) => {!!idMap[state.option.id] && methods.hide();}),
-      /*通过manager更新popup-item的option配置*/
-      manager.hooks.onCallUpdatePopup.use(async option => {
-        if (option.id !== state.option.id) {return;}
-        state.option = option;
-        await delay();
-        methods.refresh();
-      }),
-      /*通过manager刷新popup-item定位*/
-      manager.hooks.onCallRefreshPopup.use(useOption => {
-        if (useOption.id !== state.option.id) {return;}
-        methods.refresh();
-      })
-    ].forEach(i => effects.push(i));
-
-    /**
-     * 将当前popup根节点添加到manager管理中
-     * @author  韦胜健
-     * @date    2023/5/16 17:15
-     */
-    effects.push(
-      manager.hooks.onGetPopupElements.use(list => {
-        !!refs.popup && list.push(() => ({ option: state.option, popupEl: refs.popup }));
-      })
-    );
-
-    /**
-     * 清理副作用
-     * @author  韦胜健
-     * @date    2023/5/16 17:15
-     */
-    onBeforeUnmount(effects.clear);
-
-    /**
-     * 当reference的父节点滚动的情况下，刷新popup item的定位
-     * @author  韦胜健
-     * @date    2023/5/16 17:14
-     */
-    useWatchAutoClear(() => state.option.reference, () => {
-      const effects: SimpleFunction[] = [];
-      if (!state.option.reference) {return doNothing;}
-      const parents = getElementParents(state.option.reference).concat(window as any);
-      const onScroll = () => {
-        if (state.option.hideOnScroll) {
-          methods.hide();
-          return;
-        }
-        if (state.option.refreshOnScroll) {
-          methods.transformRefresh();
-          return;
-        }
-      };
-      parents.forEach(parent => {
-        if (!parent) {return;}
-        parent.addEventListener('scroll', onScroll);
-        effects.push(() => {parent.removeEventListener('scroll', onScroll);});
-      });
-      return () => {effects.forEach(i => i());};
-    });
-
-    /**
-     *  初始化popup-item根节点的监听事件
-     * @author  韦胜健
-     * @date    2023/5/16 17:14
-     */
-    usePopupTrigger({
-      get: () => ({ popupEl: refs.popup, trigger: state.option.trigger }),
-      getOption: () => state.option,
-      manager,
-    });
-
-    /**
-     * 销毁前通知manager关闭，以便关闭子popup item
-     * @author  韦胜健
-     * @date    2023/5/18 20:05
-     */
-    onBeforeUnmount(() => {
-      manager.hooks.onPopupItemDestroy.exec(state.option);
-      if (manager.methods.isOpen(state.option)) {
-        manager.hooks.onPopupItemClose.exec(state.option);
-      }
-    });
-
-    PopupItemProvide.provide(state);
-
-    return () => (
-      !!state.option.reference && <Portal to={`.${getComponentCls(APPLICATION_SERVICE_CONTAINER_CLASS)}`}>
-        <div
-          data-id={state.option.id}
-          ref={onRef.popup}
-          className={classes.value}
-          data-popup-show={String(state.isShow)}
-          onTransitionEnd={handler.onTransitionend}
-          style={styles.value}
-        >
-          {/*slide的情况下，arrow得放body外面，避免被overflow:hidden*/}
-          {!!state.option.arrowSize && !state.option.noArrow && state.option.animation !== ePopupAnimation.scale && (<div className="popup-item-arrow" ref={onRef.arrow}/>)}
-          <div
-            ref={onRef.body}
-            className="popup-item-body"
-          >
-            {/*scale的情况下，arrow得放body里边，一遍能够继承body的transform:scale*/}
-            {!!state.option.arrowSize && !state.option.noArrow && state.option.animation === ePopupAnimation.scale && (<div className="popup-item-arrow" ref={onRef.arrow}/>)}
-            <div
-              ref={onRef.content}
-              style={contentStyles.value}
-              className="popup-item-content"
-              onTransitionEnd={handler.onTransitionend}
-            >
-              {slots.default.isExist() ? slots.default() : state.option.render()}
-            </div>
-          </div>
-        </div>
-      </Portal>
-    );
-  },
-});
+import {designComponent, getComponentCls, iHTMLDivElement, iHTMLElement, iTransitionEvent, nextIndex, onBeforeUnmount, onMounted, Portal, PropType, reactive, SimpleFunction, useClassCache, useRefs, useStyleCache} from "plain-design-composition";
+import {ePopupAnimation, iPopupOption, iPopupRefs, PopupItemProvide} from "./utils/popup.utils";
+import {createEffects} from "plain-utils/utils/createEffects";
+import {delay} from "plain-utils/utils/delay";
+import './popup-item.scss';
+import {PopupManager} from "./usePopupManager";
+import {refreshPopup} from "./refresh/refreshPopup";
+import {getBoundary} from "./utils/getBoundary";
+import {useWatchAutoClear} from "../../utils/watchEffectAutoClear";
+import {getElementParents} from "../../utils/getElementParents";
+import {usePopupTrigger} from "./trigger/usePopupTrigger";
+import {APPLICATION_SERVICE_CONTAINER_CLASS} from "../Application/utils/application.utils";
+import {doNothing} from "../../utils/doNothing";
+import {unit} from "plain-utils/string/unit";
+import ApplicationConfigurationProvider from "../ApplicationConfigurationProvider";
+
+export const PopupItem = designComponent({
+  name: 'popup-item',
+  props: {
+    option: { type: Object as PropType<iPopupOption>, required: true },
+  },
+  slots: ['default'],
+  setup({ props: _props, slots }) {
+
+    /**
+     * popup item在销毁前需要清理的副作用
+     * @author  韦胜健
+     * @date    2023/5/16 17:09
+     */
+    const { effects } = createEffects();
+
+    const application = ApplicationConfigurationProvider.inject();
+    /**
+     * 内部节点的引用
+     * @author  韦胜健
+     * @date    2023/5/16 17:09
+     */
+    const { refs, onRef } = useRefs({ popup: iHTMLDivElement, content: iHTMLDivElement, arrow: iHTMLDivElement, body: iHTMLElement });
+
+    const manager = PopupManager.inject()!;
+
+    const state = reactive({
+      /**
+       * 当前popup item对应的option对象，不可以通过props.option来更新，必须调用manager.methods.update手动更新
+       * @author  韦胜健
+       * @date    2023/5/16 17:09
+       */
+      option: _props.option,
+      /**
+       * 当前popup-item是否显示
+       * @author  韦胜健
+       * @date    2023/5/16 17:10
+       */
+      isShow: false,
+      /**
+       * 标识，当popup挂载完更新完定位之后标识为ture，在为false的情况下禁用popup内部所有节点的transition过度动画以及opacity为0， 避免挂载的一瞬间显示在左上角的问题；
+       * @author  韦胜健
+       * @date    2023/5/16 17:11
+       */
+      isAnimationReady: false,
+      /**
+       * 层级
+       * @author  韦胜健
+       * @date    2023/5/17 18:47
+       */
+      zIndex: nextIndex(),
+    });
+
+    const classes = useClassCache(() => [
+      state.option.popperClass,
+      state.option.externalClass,
+      getComponentCls('popup-item'),
+      `popup-item-size-${state.option.size}`,
+      `popup-item-animation-${state.option.animation}`,
+      {
+        'popup-item-cover': state.option.cover,
+        'popup-item-no-padding': state.option.noPadding,
+        'popup-item-no-background': state.option.noBackground,
+        'popup-item-no-border': state.option.noBorder,
+        'popup-item-no-transition': state.option.noTransition,
+        'popup-item-animation-ready': state.isAnimationReady,
+        'popup-item-is-dark': !application.value.theme.dark && !state.option.status && !!state.option.dark,
+        [`popup-item-status-${state.option.status}`]: !!state.option.status,
+        'popup-item-dark-app': application.value.theme.dark,
+      }
+    ]);
+
+    const styles = useStyleCache((styles) => {
+      styles.zIndex = state.zIndex;
+    });
+
+    const contentStyles = useStyleCache((styles) => {
+      const { minWidth, minHeight, height, width } = state.option;
+      if (!!minWidth) {styles.minWidth = unit(minWidth);}
+      if (!!minHeight) {styles.minHeight = unit(minHeight);}
+      if (!!height) {styles.height = unit(height);}
+      if (!!width) {styles.width = unit(width);}
+    });
+
+    const methods = {
+      /**
+       * 刷新定位
+       * @author  韦胜健
+       * @date    2023/5/16 17:11
+       */
+      refresh: (() => {
+
+        /*真实的刷新定位动作*/
+        const _refresh = (transformLocation?: boolean) => {
+
+          if (!refs.popup) {
+            manager.methods.remove(state.option.id);
+            return;
+          }
+
+          const popupRefs: iPopupRefs = {
+            directionReference: state.option.stickyReference || state.option.reference,
+            alignReference: state.option.reference,
+            boundary: getBoundary(state.option.boundary),
+            popupEl: refs.popup!,
+            popupContent: refs.content!,
+            popupArrow: refs.arrow || null,
+          };
+
+          if (!!state.option.boundary && !popupRefs.boundary) {
+            console.warn(`can't find boundary element:${state.option.boundary}`);
+          }
+
+          if (!popupRefs.directionReference) {
+            console.warn('no popupRefs.directionReference');
+            return;
+          }
+          if (!popupRefs.alignReference) {
+            console.warn('no popupRefs.alignReference');
+            return;
+          }
+          if (!popupRefs.popupEl) {
+            console.warn('no popupRefs.popupEl');
+            return;
+          }
+          if (!manager.methods.isShow(state.option) && manager.methods.isOpen(state.option)) {
+            /*准备关闭*/
+            return;
+          }
+
+          refreshPopup({
+            transformLocation: !!transformLocation,
+            refs: popupRefs,
+            option: {
+              ...state.option,
+              ...(() => {
+                const arrowSize = state.option.noArrow ? 0 : state.option.arrowSize;
+                const offset = (arrowSize || 0) + state.option.offset;
+                return { arrowSize, offset };
+              })()
+            },
+          });
+
+        };
+
+        let hookEffects: SimpleFunction[] = [];
+
+        const doRefresh = (transformLocation?: boolean) => {
+          hookEffects.forEach(i => i());
+          hookEffects = [];
+          _refresh(transformLocation);
+        };
+
+        return (transformLocation?: boolean) => {
+          if (state.option.animation !== ePopupAnimation.slide) {
+            doRefresh(transformLocation);
+          } else {
+            if (manager.methods.isShow(state.option) === manager.methods.isOpen(state.option)) {
+              /*当前show与open一致，没有过渡动画，直接刷新定位*/
+              doRefresh(transformLocation);
+            } else {
+              /*当前show与open不一致，处于过渡动画中，等动画结束再刷新定位*/
+              hookEffects.push(manager.hooks.onPopupItemOpen.use(() => {doRefresh(transformLocation);}));
+              hookEffects.push(manager.hooks.onPopupItemClose.use(() => {doRefresh(transformLocation);}));
+            }
+          }
+        };
+      })(),
+      /**
+       * 使用transform的方式刷新定位
+       * @author  韦胜健
+       * @date    2023/5/16 17:11
+       */
+      transformRefresh: (() => {
+        let timer: any;
+        return () => {
+          if (!!timer) {
+            clearTimeout(timer);
+            timer = null;
+          }
+          methods.refresh(true);
+          timer = setTimeout(() => {
+            methods.refresh();
+          }, 100);
+        };
+      })(),
+      /**
+       * 显示popup-item
+       * @author  韦胜健
+       * @date    2023/5/16 17:11
+       */
+      show: async () => {
+        if (state.isShow) {return;}
+        const flag = state.option.beforeShow?.();
+        if (flag === false) {return;}
+        state.zIndex = nextIndex();
+        state.isShow = true;
+        await manager.hooks.onPopupItemShow.exec(state.option);
+      },
+      /**
+       * 隐藏popup-item
+       * @author  韦胜健
+       * @date    2023/5/16 17:12
+       */
+      hide: async () => {
+        if (!state.isShow) {return;}
+        const flag = state.option.beforeHide?.();
+        if (flag === false) {return;}
+        state.isShow = false;
+        await manager.hooks.onPopupItemHide.exec(state.option);
+      },
+    };
+
+    const handler = {
+      /**
+       * 监听动画结束动作，派发open/close事件
+       * @author  韦胜健
+       * @date    2023/5/16 17:12
+       */
+      onTransitionend: (() => {
+        let timer: any;
+        const check = (e: iTransitionEvent) => {
+
+          let isMatch = false;
+
+          switch (state.option.animation) {
+            case ePopupAnimation.slide:
+              /*slide动画的时候，动画主体是[content]节点*/
+              if (e.target === refs.content && e.propertyName === 'transform') {isMatch = true;}
+              break;
+            case ePopupAnimation.scale:
+              /*scale动画的时候，动画主体是[body]节点，动画主体不能设置为el节点，因为设置为el节点的话会导致获取的定位信息在缩放的情况下不准确*/
+              if (e.target === refs.body && e.propertyName === 'transform') {isMatch = true;}
+              break;
+            default:
+              /*其他动画的时候，主体是[el]节点*/
+              if (e.target === refs.popup) {isMatch = true;}
+          }
+
+          if (isMatch) {
+            if (!!timer) {clearTimeout(timer);}
+            timer = setTimeout(() => {
+              timer = null;
+              state.isShow ? manager.hooks.onPopupItemOpen.exec(state.option) : manager.hooks.onPopupItemClose.exec(state.option);
+            }, 0);
+          }
+        };
+        return check;
+      })(),
+    };
+
+    onMounted(async () => {
+      await delay();
+      await methods.refresh();
+      state.isAnimationReady = true;
+      await methods.show();
+    });
+
+    [
+      /*通过manager控制popup-item显示*/
+      manager.hooks.onCallShowPopup.use((option) => {option.id === state.option.id && methods.show();}),
+      /*通过manager控制popup-item隐藏*/
+      manager.hooks.onCallHidePopup.use((idMap) => {!!idMap[state.option.id] && methods.hide();}),
+      /*通过manager更新popup-item的option配置*/
+      manager.hooks.onCallUpdatePopup.use(async option => {
+        if (option.id !== state.option.id) {return;}
+        state.option = option;
+        await delay();
+        methods.refresh();
+      }),
+      /*通过manager刷新popup-item定位*/
+      manager.hooks.onCallRefreshPopup.use(useOption => {
+        if (useOption.id !== state.option.id) {return;}
+        methods.refresh();
+      })
+    ].forEach(i => effects.push(i));
+
+    /**
+     * 将当前popup根节点添加到manager管理中
+     * @author  韦胜健
+     * @date    2023/5/16 17:15
+     */
+    effects.push(
+      manager.hooks.onGetPopupElements.use(list => {
+        !!refs.popup && list.push(() => ({ option: state.option, popupEl: refs.popup }));
+      })
+    );
+
+    /**
+     * 清理副作用
+     * @author  韦胜健
+     * @date    2023/5/16 17:15
+     */
+    onBeforeUnmount(effects.clear);
+
+    /**
+     * 当reference的父节点滚动的情况下，刷新popup item的定位
+     * @author  韦胜健
+     * @date    2023/5/16 17:14
+     */
+    useWatchAutoClear(() => state.option.reference, () => {
+      const effects: SimpleFunction[] = [];
+      if (!state.option.reference) {return doNothing;}
+      const parents = getElementParents(state.option.reference).concat(window as any);
+      const onScroll = () => {
+        if (state.option.hideOnScroll) {
+          methods.hide();
+          return;
+        }
+        if (state.option.refreshOnScroll) {
+          methods.transformRefresh();
+          return;
+        }
+      };
+      parents.forEach(parent => {
+        if (!parent) {return;}
+        parent.addEventListener('scroll', onScroll);
+        effects.push(() => {parent.removeEventListener('scroll', onScroll);});
+      });
+      return () => {effects.forEach(i => i());};
+    });
+
+    /**
+     *  初始化popup-item根节点的监听事件
+     * @author  韦胜健
+     * @date    2023/5/16 17:14
+     */
+    usePopupTrigger({
+      get: () => ({ popupEl: refs.popup, trigger: state.option.trigger }),
+      getOption: () => state.option,
+      manager,
+    });
+
+    /**
+     * 销毁前通知manager关闭，以便关闭子popup item
+     * @author  韦胜健
+     * @date    2023/5/18 20:05
+     */
+    onBeforeUnmount(() => {
+      manager.hooks.onPopupItemDestroy.exec(state.option);
+      if (manager.methods.isOpen(state.option)) {
+        manager.hooks.onPopupItemClose.exec(state.option);
+      }
+    });
+
+    PopupItemProvide.provide(state);
+
+    return () => (
+      !!state.option.reference && <Portal to={`.${getComponentCls(APPLICATION_SERVICE_CONTAINER_CLASS)}`}>
+        <div
+          data-id={state.option.id}
+          ref={onRef.popup}
+          className={classes.value}
+          data-popup-show={String(state.isShow)}
+          onTransitionEnd={handler.onTransitionend}
+          style={styles.value}
+        >
+          {/*slide的情况下，arrow得放body外面，避免被overflow:hidden*/}
+          {!!state.option.arrowSize && !state.option.noArrow && state.option.animation !== ePopupAnimation.scale && (<div className="popup-item-arrow" ref={onRef.arrow}/>)}
+          <div
+            ref={onRef.body}
+            className="popup-item-body"
+          >
+            {/*scale的情况下，arrow得放body里边，一遍能够继承body的transform:scale*/}
+            {!!state.option.arrowSize && !state.option.noArrow && state.option.animation === ePopupAnimation.scale && (<div className="popup-item-arrow" ref={onRef.arrow}/>)}
+            <div
+              ref={onRef.content}
+              style={contentStyles.value}
+              className="popup-item-content"
+              onTransitionEnd={handler.onTransitionend}
+            >
+              {slots.default.isExist() ? slots.default() : state.option.render()}
+            </div>
+          </div>
+        </div>
+      </Portal>
+    );
+  },
+});