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` |