feat: popper 受控模式 (#898)

* feat: popper 受控模式 * fix: 优化代码
WeBankFinTech · Oct 19, 2024 · a93619a · a93619a
1 parent 9448969
commit a93619a
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 24 deletions.
diff --git a/components/popper/popper.tsx b/components/popper/popper.tsx
@@ -26,8 +26,8 @@ const prefixCls = getPrefixCls('popper');
 export default defineComponent({
     name: 'FPopper',
     props: popperProps,
-    emits: [UPDATE_MODEL_EVENT],
-    setup(props, { slots, emit }) {
+    emits: [UPDATE_MODEL_EVENT, 'clickOutside'],
+    setup(props, { slots, emit, expose }) {
         useTheme();
         if (!slots.trigger) {
             throw new Error('[FPopper]: Trigger must be provided');
@@ -85,6 +85,7 @@ export default defineComponent({
             [triggerRef, popperRef],
             () => {
                 updateVisible(false);
+                emit('clickOutside');
             },
             disabledWatch,
         );
@@ -126,6 +127,12 @@ export default defineComponent({
             );
         };
 
+        expose({
+            updatePopperPosition() {
+                computePopper();
+            },
+        });
+
         return () => (
             <Fragment>
                 {renderTrigger()}

diff --git a/components/popper/props.ts b/components/popper/props.ts
@@ -54,6 +54,10 @@ export const popperProps = {
     onlyShowTrigger: {
         type: Boolean,
     },
+    passive: {
+        type: Boolean,
+        default: true,
+    },
 } as const satisfies ComponentObjectPropsOptions;
 
 export type PopperProps = ExtractPublicPropTypes<typeof popperProps>;
diff --git a/components/popper/usePopper.ts b/components/popper/usePopper.ts
@@ -1,22 +1,7 @@
-import {
-    computed,
-    nextTick,
-    onActivated,
-    onMounted,
-    reactive,
-    ref,
-    watch,
-} from 'vue';
-import {
-    type ReferenceElement,
-    arrow,
-    computePosition,
-    flip,
-    offset,
-    shift,
-} from '@floating-ui/dom';
+import { computed, nextTick, onActivated, onMounted, reactive, ref, watch } from 'vue';
+import { type ReferenceElement, arrow, computePosition, flip, offset, shift } from '@floating-ui/dom';
 import { isBoolean, isFunction } from 'lodash-es';
-import { useNormalModel } from '../_util/use/useModel';
+import { useVModel } from '@vueuse/core';
 import popupManager from '../_util/popupManager';
 import getElementFromVueInstance from '../_util/getElementFromVueInstance';
 
@@ -31,7 +16,12 @@ const MAP = {
 } as const;
 
 export default (props: PopperProps, emit: any) => {
-    const [visible, updateVisible] = useNormalModel(props, emit);
+    const visible = useVModel(props, 'modelValue', emit, {
+        passive: props.passive,
+    });
+    const updateVisible = (val: boolean) => {
+        visible.value = val;
+    };
     const virtualRect = ref<VirtualRect | null>(null);
     const triggerRef = ref<HTMLElement>();
     const popperRef = ref<HTMLElement>();
@@ -44,9 +34,7 @@ export default (props: PopperProps, emit: any) => {
 
     const transitionName = computed(() => {
         const placementValue = placement.value;
-        return `fes-slide-${
-            MAP[placementValue.split('-')[0] as keyof typeof MAP]
-        }`;
+        return `fes-slide-${MAP[placementValue.split('-')[0] as keyof typeof MAP]}`;
     });
 
     const computePopper = () => {

diff --git a/docs/.vitepress/components/popper/index.md b/docs/.vitepress/components/popper/index.md
@@ -41,6 +41,7 @@ visible.vue
 | popperClass       | 弹出框的样式类名                                                                                                                                      | string \| object \| Array | -                     |
 | popperStyle       | 弹出框的样式                                                                                                                                          | object                    | -                     |
 | showAfter         | 显示的延迟时间                                                                                                                                        | number                    | `0`                   |
+| passive           | 非受控                                                                                                                                                | boolean                   | `true`                |
 | hideAfter         | 隐藏的延迟时间                                                                                                                                        | number                    | `0`                   |
 | lazy              | 是否懒渲染                                                                                                                                            | boolean                   | `true`                |
 | getContainer      | 配置渲染节点的输出位置                                                                                                                                | () => HTMLElement         | `() => document.body` |