plain-design 1.0.0-beta.9 → 1.0.0-beta.90

package/src/packages/components/Popup/index.tsx

@@ -1,393 +1,395 @@
-import {ComponentPropsType, Fragment, computed, designComponent, getComponentCls, onBeforeUnmount, PropType, reactive, RenderNode, useClassCache, useModel, useStyleCache, watch, watchEffect} from "plain-design-composition";
-import {iPopupAnimation, iPopupCustomOption, iPopupDefaultOption, iPopupPlacement, iPopupTrigger, iPopupUseOption, PopupItemProvide} from "../usePopup/utils/popup.utils";
-import {Reference} from "../Reference";
-import {usePopup} from "../usePopup";
-import {useReferenceTrigger} from "../usePopup/trigger/useReferenceTrigger";
-import {ThemeSize, ThemeStatus} from "../../uses/useStyle";
-import {Scroll} from "../Scroll";
-import {decodePlacement} from "../usePopup/utils/decodePlacement";
-import {unit} from "plain-utils/string/unit";
-import './popup.scss';
-import {EditProps} from "../../uses/useEdit";
-import {iPopupProviderMeta, PopupProvider} from "./PopupProvider";
-
-export const Popup = designComponent({
-  name: 'popup',
-  props: {
-    ...EditProps,
-
-    open: { type: Boolean },                                                              // 双向绑定值，用于判断当前是否已经完全显示/关闭
-    modelValue: { type: Boolean },                                                        // 双向绑定值，是否显示
-    height: { type: [String, Number] },                                                   // 高度
-    width: { type: [String, Number] },                                                    // 宽度
-
-    reference: { type: [Object, Function] as PropType<any> },                             // 外部reference
-    stickyReference: { type: [Object, Function] as PropType<any> },                       // 外部stickyReference
-    placement: { type: String as PropType<iPopupPlacement>, default: 'top' },
-    sizeEqual: { type: Boolean },                                                         // 是否限制方向上大小相等
-    trigger: { type: String as PropType<iPopupTrigger> },                                 // 触发类型
-    animation: { type: String as PropType<iPopupAnimation> },                             // 动画类型
-    hideOnClickReference: { type: Boolean, default: true },                               // 是否在点击reference的时候关闭popup（仅hover，contextmenu触发类型的情况下有效）
-    arrowSize: { type: Number },                                                          // 箭头大小
-    noPadding: { type: Boolean },                                                         // 去掉默认内边距
-    beforeShow: { type: Function as PropType<iPopupCustomOption['beforeShow']> },         // 显示之前处理动作，返回false则阻止显示
-    beforeHide: { type: Function as PropType<iPopupCustomOption['beforeHide']> },         // 隐藏之前处理动作，返回false则阻止隐藏
-    destroyOnClose: { type: Boolean, default: true, },                                                    // 是否在关闭的时候销毁内容
-    type: { type: String as PropType<iPopupDefaultOption['type']> },                      // 类型，在打开一个popup的时候，会将同类型的popup自动关闭
-    to: { type: String as PropType<iPopupDefaultOption['to']> },                          // 挂载到某个dom节点下
-    offset: { type: Number as PropType<iPopupDefaultOption['offset']> },                  // 在direction方向上的距离
-    autoSwitchDirection: { type: Boolean as PropType<iPopupDefaultOption['autoSwitchDirection']>, default: true },// 当空间不够时，是否自动切换direction
-    size: { type: String as PropType<iPopupDefaultOption['size']> },                      // popup内容尺寸
-    arrowScale: { type: Number as PropType<iPopupDefaultOption['arrowScale']> },          // 箭头缩放比例
-    refreshOnScroll: { type: Boolean as PropType<iPopupDefaultOption['refreshOnScroll']>, default: true },//是否在reference的父节点滚动的情况下自动刷新定位
-    hideOnScroll: { type: Boolean as PropType<iPopupDefaultOption['hideOnScroll']>, default: false },     // 是否在reference的父节点滚动的情况下自动关闭
-    interactive: { type: Boolean as PropType<iPopupDefaultOption['interactive']>, default: true },       // 仅hover触发类型下有效，是否可以在popup内容区域交互，为false则当鼠标进入popup内容区域时仍会关闭popup
-    boundary: { type: String as PropType<iPopupUseOption['boundary']>, default: 'body' }, // 边界元素
-    popperClass: {},                                                                      // 额外的class类名
-    toggleOnClickReference: { type: Boolean, default: true },                             // 是否在点击reference的时候自动切换隐藏/显示，否则的话点击reference 会一直显示，仅trigger为click下有效
-    dark: { type: Boolean },                                                              // 使用纯黑色主题
-    status: { type: String as PropType<typeof ThemeStatus.TYPE> },                        // 状态
-    noArrow: { type: Boolean, default: null },                                            // 是否去掉箭头
-    minWidth: { type: [Number, String] },                                                 // 最小宽度
-    minHeight: { type: [Number, String] },                                                // 最小高度
-    noBackground: { type: Boolean },                                                      // 透明背景色
-    cover: { type: Boolean },                                                             // 覆盖reference
-    noBorder: { type: Boolean },                                                          // 无边框
-
-    title: { type: [String, Function] as PropType<string | (() => RenderNode)> },
-    message: { type: [String, Function] as PropType<string | (() => RenderNode)> },
-    popperSize: { type: String as PropType<typeof ThemeSize.TYPE> },                      // popper尺寸
-    scrollAttrs: { type: Object as PropType<ComponentPropsType<typeof Scroll>> },         // 给scroll组件传递的属性
-    externalClass: {},                                                                    // 额外的class类名
-
-    watchData: {},                                                                        // 监听数据变化以刷新popper位置
-    noScroll: { type: Boolean },                                                          // 禁用滚动自动添加滚动容器
-  },
-  emits: {
-    onUpdateModelValue: (val?: boolean) => true,
-    onUpdateOpen: (val?: boolean) => true,
-
-    onOpen: () => true,
-    onClose: () => true,
-    onShow: () => true,
-    onHide: () => true,
-
-    onReferenceDetected: (reference: HTMLElement | null) => true,
-  },
-  slots: ['default', 'popper', 'head'],
-  setup({ props, event, slots }) {
-
-    /**
-     * 父popup向子提供的iPopupProviderMeta数据，当前popup的一些默认属性继承自父popup提供的属性
-     * @author  韦胜健
-     * @date    2023/5/16 16:04
-     */
-    const parent = PopupProvider.inject(null);
-
-    /**
-     * 父popup item
-     * @author  韦胜健
-     * @date    2023/6/5 9:51
-     */
-    const parentPopupItem = PopupItemProvide.inject(null);
-
-    /**
-     * 隐藏/显示绑定值
-     * @author  韦胜健
-     * @date    2023/5/16 16:05
-     */
-    const model = useModel(() => props.modelValue, event.emit.onUpdateModelValue, {
-      onChange: (val) => {
-        !!val ? $popup.show(state.getOption()) : $popup.hide(popupId);
-      },
-    });
-
-    /**
-     * 完全开启/完全关闭绑定值
-     * @author  韦胜健
-     * @date    2023/5/16 16:05
-     */
-    const openModel = useModel(() => props.open, event.emit.onUpdateOpen);
-
-    const { $popup, popupId } = usePopup();
-
-    /**
-     * 向子popup提供的属性
-     * @author  韦胜健
-     * @date    2023/5/16 16:06
-     */
-    const provideData = computed((): iPopupProviderMeta => {
-      return {
-        trigger: props.trigger || parent?.value.trigger || 'hover',
-        animation: props.animation || parent?.value.animation || 'fade',
-        id: popupId,
-        size: props.popperSize != null ? props.popperSize : (parent?.value.size || undefined),
-        arrowSize: props.arrowSize != null ? props.arrowSize : (parent?.value.arrowSize || undefined),
-        arrowScale: props.arrowScale != null ? props.arrowScale : (parent?.value.arrowScale || undefined),
-        noArrow: props.noArrow != null ? props.noArrow : (parent?.value.noArrow || undefined),
-        parent: parent?.value || (!parentPopupItem ? undefined : { id: parentPopupItem.option.id }),
-      };
-    });
-
-    PopupProvider.provide(provideData);
-
-    /**
-     * 当前的目标定位元素
-     * @author  韦胜健
-     * @date    2023/5/16 16:06
-     */
-    const reference = computed(() => {
-      let reference: any = props.reference || state.getReference();
-      if (!!reference) {
-        if (typeof reference === "function") {
-          reference = reference();
-        }
-        if (!!reference && !!reference.$el) {
-          reference = reference.$el;
-        }
-      }
-      return reference;
-    });
-
-    /**
-     * sticky的目标定位元素
-     * @author  韦胜健
-     * @date    2023/5/16 16:07
-     */
-    const stickyReference = computed(() => {
-      let reference: any = props.stickyReference;
-      if (!!reference) {
-        if (typeof reference === "function") {
-          reference = reference();
-        }
-        if (!!reference && !!reference.$el) {
-          reference = reference.$el;
-        }
-      }
-      return reference;
-    });
-
-    /**
-     * 解析placement字符串
-     * @author  韦胜健
-     * @date    2022/4/8 16:45
-     */
-    const placementData = computed(() => decodePlacement(props.placement));
-
-    /**
-     * content节点样式（宽高）
-     * @author  韦胜健
-     * @date    2022/4/8 16:45
-     */
-    const wrapperStyles = useStyleCache(styles => {
-      const { isVertical } = placementData.value;
-      let { height, width, sizeEqual } = props;
-      if (sizeEqual) {
-        if (isVertical) {
-          width = undefined;
-        } else {
-          height = undefined;
-        }
-      }
-      if (!!width) {
-        styles.width = unit(width);
-      }
-      if (!!height) {
-        styles.height = unit(height);
-      }
-    });
-
-    /**
-     * popup根节点元素额外样式
-     * @author  韦胜健
-     * @date    2023/5/16 16:08
-     */
-    const classes = useClassCache(() => [
-      getComponentCls('popup'),
-      props.externalClass as any,
-      props.popperClass as any,
-    ]);
-
-    const state = reactive({
-      /**
-       * 保留从slots中获取的reference对象的引用
-       * @author  韦胜健
-       * @date    2023/5/16 16:08
-       */
-      getReference: () => null as null | undefined | HTMLElement,
-      /**
-       * 计算渲染所需要的option
-       * @author  韦胜健
-       * @date    2023/5/16 16:09
-       */
-      getOption: (): iPopupUseOption => ({
-        ...provideData.value,
-        popperClass: classes.value,
-        reference: reference.value!,
-        placement: props.placement,
-        hideOnClickReference: props.hideOnClickReference,
-        sizeEqual: props.sizeEqual,
-        noPadding: props.noPadding,
-        destroyOnClose: props.destroyOnClose,
-        type: props.type,
-        to: props.to,
-        offset: props.offset,
-        autoSwitchDirection: props.autoSwitchDirection,
-        refreshOnScroll: props.refreshOnScroll,
-        hideOnScroll: props.hideOnScroll,
-        interactive: props.interactive,
-        boundary: props.boundary,
-        stickyReference: stickyReference.value,
-        toggleOnClickReference: props.toggleOnClickReference,
-        parentId: provideData.value.parent?.id,
-        dark: props.dark,
-        status: props.status,
-        noArrow: props.noArrow,
-        minHeight: props.minHeight,
-        minWidth: props.minWidth,
-        noBackground: props.noBackground,
-        cover: props.cover,
-        noBorder: props.noBorder,
-        /*更新绑定值并且派发显示事件*/
-        onShow: () => {
-          model.value = true;
-          event.emit.onShow();
-        },
-        /*更新绑定值并且派发隐藏事件*/
-        onHide: () => {
-          model.value = false;
-          event.emit.onHide();
-        },
-        /*更新绑定值并且派发完全开启事件*/
-        onOpen: () => {
-          openModel.value = true;
-          event.emit.onOpen();
-        },
-        /*更新绑定值并且派发完全关闭事件*/
-        onClose: () => {
-          openModel.value = false;
-          event.emit.onClose();
-        },
-        /*开启之前检查，如果已经禁用则禁止显示*/
-        beforeShow: () => {
-          if (props.disabled || props.readonly) {
-            return false;
-          }
-          return props.beforeShow?.();
-        },
-        /*关闭之前检查，如果已经禁用则禁止关闭*/
-        beforeHide: () => {
-          if (props.disabled || props.readonly) {
-            return false;
-          }
-          return props.beforeHide?.();
-        },
-
-        /*自定义渲染popup-item，以实现继承组件上下文的特性*/
-        customRenderPopupItem: true,
-        /*具体渲染内容*/
-        render: () => {
-          let content = (
-            <div className="popup-content">
-              {(slots.head.isExist() || !!props.title) && (
-                <div className="popper-head">{slots.head(typeof props.title === "function" ? props.title() : props.title)}</div>
-              )}
-              <Fragment key="popper">{slots.popper(typeof props.message === "function" ? props.message() : props.message)}</Fragment>
-            </div>
-          );
-
-          const wrapperStylesValue = wrapperStyles.value as any;
-          const hasWrapper = wrapperStylesValue.height;
-
-          return hasWrapper && !props.noScroll ? (
-            /*带滚动条渲染*/
-            <div className="popup-wrapper" style={wrapperStylesValue}>
-              <Scroll {...props.scrollAttrs}>
-                {content}
-              </Scroll>
-            </div>
-          ) : (
-            /*不带滚动条渲染*/
-            content
-          );
-        }
-      })
-    });
-
-    /**
-     * 初始化reference的trigger事件监听
-     * @author  韦胜健
-     * @date    2023/5/16 16:11
-     */
-    useReferenceTrigger({
-      get: () => ({ reference: reference.value, trigger: provideData.value.trigger }),
-      manager: $popup.manager,
-      getOption: () => state.getOption(),
-    });
-
-    /**
-     * option变化的时候更新popup-item的option
-     * @author  韦胜健
-     * @date    2023/5/16 16:11
-     */
-    watchEffect(() => {
-      const option = state.getOption();
-      $popup.update(option);
-    });
-
-    const handler = {
-      /**
-       * 检测slots.default中的reference对象
-       * @author  韦胜健
-       * @date    2023/5/16 16:12
-       */
-      onReferenceDetected: (el: HTMLElement | null | undefined) => {
-        state.getReference = () => el;
-        event.emit.onReferenceDetected(el!);
-      },
-    };
-
-    /**
-     * 初始化的时候，如果是要立即打开，则在检测到reference有值的时候就立即打开。只检查一次
-     * @author  韦胜健
-     * @date    2023/5/16 16:12
-     */
-    if (!!model.value) {
-      const unwatch = watch(() => reference.value, reference => {
-        if (!reference) {
-          return;
-        }
-        unwatch();
-        $popup.show(state.getOption());
-      });
-    }
-
-    onBeforeUnmount(
-      watch(() => props.watchData, () => {
-        $popup.update(state.getOption());
-      })
-    );
-
-    const refresh = () => {
-      $popup.refresh(state.getOption());
-    };
-
-    return {
-      refer: {
-        event,
-        $popup,
-        popupId,
-        refresh,
-      },
-      render: () => {
-        const defaultSlot = slots.default();
-        return <>
-          {!!defaultSlot && !props.reference && <Reference onElementDetected={handler.onReferenceDetected}>{defaultSlot}</Reference>}
-          {$popup.manager.methods.renderPopupItem(state.getOption(), state.getOption().render())}
-        </>;
-      }
-    };
-  },
-});
-
-export default Popup;
+import {ComponentPropsType, computed, designComponent, Fragment, getComponentCls, onBeforeUnmount, PropType, reactive, RenderNode, useClassCache, useModel, useStyleCache, watch, watchEffect} from "plain-design-composition";
+import {iPopupAnimation, iPopupCustomOption, iPopupDefaultOption, iPopupPlacement, iPopupTrigger, iPopupUseOption, PopupItemProvide} from "../usePopup/utils/popup.utils";
+import {Reference} from "../Reference";
+import {usePopup} from "../usePopup";
+import {useReferenceTrigger} from "../usePopup/trigger/useReferenceTrigger";
+import {ThemeSize, ThemeStatus} from "../../uses/useStyle";
+import {Scroll} from "../Scroll";
+import {decodePlacement} from "../usePopup/utils/decodePlacement";
+import {unit} from "plain-utils/string/unit";
+import './popup.scss';
+import {EditProps} from "../../uses/useEdit";
+import {iPopupProviderMeta, PopupProvider} from "./PopupProvider";
+
+export const Popup = designComponent({
+  name: 'popup',
+  props: {
+    ...EditProps,
+
+    open: { type: Boolean },                                                              // 双向绑定值，用于判断当前是否已经完全显示/关闭
+    modelValue: { type: Boolean },                                                        // 双向绑定值，是否显示
+    height: { type: [String, Number] },                                                   // 高度
+    width: { type: [String, Number] },                                                    // 宽度
+
+    reference: { type: [Object, Function] as PropType<any> },                             // 外部reference
+    stickyReference: { type: [Object, Function] as PropType<any> },                       // 外部stickyReference
+    placement: { type: String as PropType<iPopupPlacement>, default: 'top' },
+    sizeEqual: { type: Boolean },                                                         // 是否限制方向上大小相等
+    trigger: { type: String as PropType<iPopupTrigger> },                                 // 触发类型
+    animation: { type: String as PropType<iPopupAnimation> },                             // 动画类型
+    hideOnClickReference: { type: Boolean, default: true },                               // 是否在点击reference的时候关闭popup（仅hover，contextmenu触发类型的情况下有效）
+    arrowSize: { type: Number },                                                          // 箭头大小
+    noPadding: { type: Boolean },                                                         // 去掉默认内边距
+    beforeShow: { type: Function as PropType<iPopupCustomOption['beforeShow']> },         // 显示之前处理动作，返回false则阻止显示
+    beforeHide: { type: Function as PropType<iPopupCustomOption['beforeHide']> },         // 隐藏之前处理动作，返回false则阻止隐藏
+    destroyOnClose: { type: Boolean, default: true, },                                                    // 是否在关闭的时候销毁内容
+    type: { type: String as PropType<iPopupDefaultOption['type']> },                      // 类型，在打开一个popup的时候，会将同类型的popup自动关闭
+    appendToBody: { type: Boolean as PropType<iPopupDefaultOption['appendToBody']>, default: true },  // 挂载到某个dom节点下
+    transformRefreshOnScroll: { type: Boolean as PropType<iPopupDefaultOption['transformRefreshOnScroll']>, default: true },// scroll的时候refresh使用transform来优化
+    offset: { type: Number as PropType<iPopupDefaultOption['offset']> },                  // 在direction方向上的距离
+    autoSwitchDirection: { type: Boolean as PropType<iPopupDefaultOption['autoSwitchDirection']>, default: true },// 当空间不够时，是否自动切换direction
+    size: { type: String as PropType<iPopupDefaultOption['size']> },                      // popup内容尺寸
+    arrowScale: { type: Number as PropType<iPopupDefaultOption['arrowScale']> },          // 箭头缩放比例
+    refreshOnScroll: { type: Boolean as PropType<iPopupDefaultOption['refreshOnScroll']>, default: true },//是否在reference的父节点滚动的情况下自动刷新定位
+    hideOnScroll: { type: Boolean as PropType<iPopupDefaultOption['hideOnScroll']>, default: false },     // 是否在reference的父节点滚动的情况下自动关闭
+    interactive: { type: Boolean as PropType<iPopupDefaultOption['interactive']>, default: true },       // 仅hover触发类型下有效，是否可以在popup内容区域交互，为false则当鼠标进入popup内容区域时仍会关闭popup
+    boundary: { type: String as PropType<iPopupUseOption['boundary']>, default: 'body' }, // 边界元素
+    popperClass: {},                                                                      // 额外的class类名
+    toggleOnClickReference: { type: Boolean, default: true },                             // 是否在点击reference的时候自动切换隐藏/显示，否则的话点击reference 会一直显示，仅trigger为click下有效
+    dark: { type: Boolean },                                                              // 使用纯黑色主题
+    status: { type: String as PropType<typeof ThemeStatus.TYPE> },                        // 状态
+    noArrow: { type: Boolean, default: null },                                            // 是否去掉箭头
+    minWidth: { type: [Number, String] },                                                 // 最小宽度
+    minHeight: { type: [Number, String] },                                                // 最小高度
+    noBackground: { type: Boolean },                                                      // 透明背景色
+    cover: { type: Boolean },                                                             // 覆盖reference
+    noBorder: { type: Boolean },                                                          // 无边框
+
+    title: { type: [String, Function] as PropType<string | (() => RenderNode)> },
+    message: { type: [String, Function] as PropType<string | (() => RenderNode)> },
+    popperSize: { type: String as PropType<typeof ThemeSize.TYPE> },                      // popper尺寸
+    scrollAttrs: { type: Object as PropType<ComponentPropsType<typeof Scroll>> },         // 给scroll组件传递的属性
+    externalClass: {},                                                                    // 额外的class类名
+
+    watchData: {},                                                                        // 监听数据变化以刷新popper位置
+    noScroll: { type: Boolean },                                                          // 禁用滚动自动添加滚动容器
+  },
+  emits: {
+    onUpdateModelValue: (val?: boolean) => true,
+    onUpdateOpen: (val?: boolean) => true,
+
+    onOpen: () => true,
+    onClose: () => true,
+    onShow: () => true,
+    onHide: () => true,
+
+    onReferenceDetected: (reference: HTMLElement | null) => true,
+  },
+  slots: ['default', 'popper', 'head'],
+  setup({ props, event, slots }) {
+
+    /**
+     * 父popup向子提供的iPopupProviderMeta数据，当前popup的一些默认属性继承自父popup提供的属性
+     * @author  韦胜健
+     * @date    2023/5/16 16:04
+     */
+    const parent = PopupProvider.inject(null);
+
+    /**
+     * 父popup item
+     * @author  韦胜健
+     * @date    2023/6/5 9:51
+     */
+    const parentPopupItem = PopupItemProvide.inject(null);
+
+    /**
+     * 隐藏/显示绑定值
+     * @author  韦胜健
+     * @date    2023/5/16 16:05
+     */
+    const model = useModel(() => props.modelValue, event.emit.onUpdateModelValue, {
+      onChange: (val) => {
+        !!val ? $popup.show(state.getOption()) : $popup.hide(popupId);
+      },
+    });
+
+    /**
+     * 完全开启/完全关闭绑定值
+     * @author  韦胜健
+     * @date    2023/5/16 16:05
+     */
+    const openModel = useModel(() => props.open, event.emit.onUpdateOpen);
+
+    const { $popup, popupId } = usePopup();
+
+    /**
+     * 向子popup提供的属性
+     * @author  韦胜健
+     * @date    2023/5/16 16:06
+     */
+    const provideData = computed((): iPopupProviderMeta => {
+      return {
+        trigger: props.trigger || parent?.value.trigger || 'hover',
+        animation: props.animation || parent?.value.animation || 'fade',
+        id: popupId,
+        size: props.popperSize != null ? props.popperSize : (parent?.value.size || undefined),
+        arrowSize: props.arrowSize != null ? props.arrowSize : (parent?.value.arrowSize || undefined),
+        arrowScale: props.arrowScale != null ? props.arrowScale : (parent?.value.arrowScale || undefined),
+        noArrow: props.noArrow != null ? props.noArrow : (parent?.value.noArrow || undefined),
+        parent: parent?.value || (!parentPopupItem ? undefined : { id: parentPopupItem.option.id }),
+      };
+    });
+
+    PopupProvider.provide(provideData);
+
+    /**
+     * 当前的目标定位元素
+     * @author  韦胜健
+     * @date    2023/5/16 16:06
+     */
+    const reference = computed(() => {
+      let reference: any = props.reference || state.getReference();
+      if (!!reference) {
+        if (typeof reference === "function") {
+          reference = reference();
+        }
+        if (!!reference && !!reference.$el) {
+          reference = reference.$el;
+        }
+      }
+      return reference;
+    });
+
+    /**
+     * sticky的目标定位元素
+     * @author  韦胜健
+     * @date    2023/5/16 16:07
+     */
+    const stickyReference = computed(() => {
+      let reference: any = props.stickyReference;
+      if (!!reference) {
+        if (typeof reference === "function") {
+          reference = reference();
+        }
+        if (!!reference && !!reference.$el) {
+          reference = reference.$el;
+        }
+      }
+      return reference;
+    });
+
+    /**
+     * 解析placement字符串
+     * @author  韦胜健
+     * @date    2022/4/8 16:45
+     */
+    const placementData = computed(() => decodePlacement(props.placement));
+
+    /**
+     * content节点样式（宽高）
+     * @author  韦胜健
+     * @date    2022/4/8 16:45
+     */
+    const wrapperStyles = useStyleCache(styles => {
+      const { isVertical } = placementData.value;
+      let { height, width, sizeEqual } = props;
+      if (sizeEqual) {
+        if (isVertical) {
+          width = undefined;
+        } else {
+          height = undefined;
+        }
+      }
+      if (!!width) {
+        styles.width = unit(width);
+      }
+      if (!!height) {
+        styles.height = unit(height);
+      }
+    });
+
+    /**
+     * popup根节点元素额外样式
+     * @author  韦胜健
+     * @date    2023/5/16 16:08
+     */
+    const classes = useClassCache(() => [
+      getComponentCls('popup'),
+      props.externalClass as any,
+      props.popperClass as any,
+    ]);
+
+    const state = reactive({
+      /**
+       * 保留从slots中获取的reference对象的引用
+       * @author  韦胜健
+       * @date    2023/5/16 16:08
+       */
+      getReference: () => null as null | undefined | HTMLElement,
+      /**
+       * 计算渲染所需要的option
+       * @author  韦胜健
+       * @date    2023/5/16 16:09
+       */
+      getOption: (): iPopupUseOption => ({
+        ...provideData.value,
+        popperClass: classes.value,
+        reference: reference.value!,
+        placement: props.placement,
+        hideOnClickReference: props.hideOnClickReference,
+        sizeEqual: props.sizeEqual,
+        noPadding: props.noPadding,
+        destroyOnClose: props.destroyOnClose,
+        type: props.type,
+        appendToBody: props.appendToBody,
+        transformRefreshOnScroll: props.transformRefreshOnScroll,
+        offset: props.offset,
+        autoSwitchDirection: props.autoSwitchDirection,
+        refreshOnScroll: props.refreshOnScroll,
+        hideOnScroll: props.hideOnScroll,
+        interactive: props.interactive,
+        boundary: props.boundary,
+        stickyReference: stickyReference.value,
+        toggleOnClickReference: props.toggleOnClickReference,
+        parentId: provideData.value.parent?.id,
+        dark: props.dark,
+        status: props.status,
+        noArrow: props.noArrow,
+        minHeight: props.minHeight,
+        minWidth: props.minWidth,
+        noBackground: props.noBackground,
+        cover: props.cover,
+        noBorder: props.noBorder,
+        /*更新绑定值并且派发显示事件*/
+        onShow: () => {
+          model.value = true;
+          event.emit.onShow();
+        },
+        /*更新绑定值并且派发隐藏事件*/
+        onHide: () => {
+          model.value = false;
+          event.emit.onHide();
+        },
+        /*更新绑定值并且派发完全开启事件*/
+        onOpen: () => {
+          openModel.value = true;
+          event.emit.onOpen();
+        },
+        /*更新绑定值并且派发完全关闭事件*/
+        onClose: () => {
+          openModel.value = false;
+          event.emit.onClose();
+        },
+        /*开启之前检查，如果已经禁用则禁止显示*/
+        beforeShow: () => {
+          if (props.disabled || props.readonly) {
+            return false;
+          }
+          return props.beforeShow?.();
+        },
+        /*关闭之前检查，如果已经禁用则禁止关闭*/
+        beforeHide: () => {
+          if (props.disabled || props.readonly) {
+            return false;
+          }
+          return props.beforeHide?.();
+        },
+
+        /*自定义渲染popup-item，以实现继承组件上下文的特性*/
+        customRenderPopupItem: true,
+        /*具体渲染内容*/
+        render: () => {
+          let content = (
+            <div className="popup-content">
+              {(slots.head.isExist() || !!props.title) && (
+                <div className="popper-head">{slots.head(typeof props.title === "function" ? props.title() : props.title)}</div>
+              )}
+              <Fragment key="popper">{slots.popper(typeof props.message === "function" ? props.message() : props.message)}</Fragment>
+            </div>
+          );
+
+          const wrapperStylesValue = wrapperStyles.value as any;
+          const hasWrapper = wrapperStylesValue.height;
+
+          return hasWrapper && !props.noScroll ? (
+            /*带滚动条渲染*/
+            <div className="popup-wrapper" style={wrapperStylesValue}>
+              <Scroll {...props.scrollAttrs}>
+                {content}
+              </Scroll>
+            </div>
+          ) : (
+            /*不带滚动条渲染*/
+            content
+          );
+        }
+      })
+    });
+
+    /**
+     * 初始化reference的trigger事件监听
+     * @author  韦胜健
+     * @date    2023/5/16 16:11
+     */
+    useReferenceTrigger({
+      get: () => ({ reference: reference.value, trigger: provideData.value.trigger }),
+      manager: $popup.manager,
+      getOption: () => state.getOption(),
+    });
+
+    /**
+     * option变化的时候更新popup-item的option
+     * @author  韦胜健
+     * @date    2023/5/16 16:11
+     */
+    watchEffect(() => {
+      const option = state.getOption();
+      $popup.update(option);
+    });
+
+    const handler = {
+      /**
+       * 检测slots.default中的reference对象
+       * @author  韦胜健
+       * @date    2023/5/16 16:12
+       */
+      onReferenceDetected: (el: HTMLElement | null | undefined) => {
+        state.getReference = () => el;
+        event.emit.onReferenceDetected(el!);
+      },
+    };
+
+    /**
+     * 初始化的时候，如果是要立即打开，则在检测到reference有值的时候就立即打开。只检查一次
+     * @author  韦胜健
+     * @date    2023/5/16 16:12
+     */
+    if (!!model.value) {
+      const unwatch = watch(() => reference.value, reference => {
+        if (!reference) {
+          return;
+        }
+        unwatch();
+        $popup.show(state.getOption());
+      });
+    }
+
+    onBeforeUnmount(
+      watch(() => props.watchData, () => {
+        $popup.update(state.getOption());
+      })
+    );
+
+    const refresh = () => {
+      $popup.refresh(state.getOption());
+    };
+
+    return {
+      refer: {
+        event,
+        $popup,
+        popupId,
+        refresh,
+      },
+      render: () => {
+        const defaultSlot = slots.default();
+        return <>
+          {!!defaultSlot && !props.reference && <Reference onElementDetected={handler.onReferenceDetected}>{defaultSlot}</Reference>}
+          {$popup.manager.methods.renderPopupItem(state.getOption(), state.getOption().render())}
+        </>;
+      }
+    };
+  },
+});
+
+export default Popup;