fix(Drawer): 修复drawer和popover同时使用时，点击popover，drawer意外关闭的问题 (DevCloudFE#1111)

* fix(Drawer): 修复drawer和popover同时使用时，点击popover，drawer意外关闭的问题

Author: xingyan95

packages/devui-vue/devui/drawer/__tests__/drawer.spec.tsx

@@ -1,6 +1,5 @@
 import { mount } from '@vue/test-utils';
 import { nextTick, ref } from 'vue';
-
 import { useNamespace } from '../../shared/hooks/use-namespace';
 import Drawer from '../src/drawer';
 
@@ -77,7 +76,7 @@ describe('d-drawer', () => {
  expect(drawer).toBeTruthy();
 
  // click outside
- document.dispatchEvent(new Event('click'));
+ document.dispatchEvent(new Event('click', { bubbles: true }));
  await nextTick();
  drawer = getDrawer();
  expect(drawer).toBeFalsy();
@@ -164,7 +163,7 @@ describe('d-drawer', () => {
  await nextTick();
  expect(onOpen).toBeCalled();
 
- document.dispatchEvent(new Event('click'));
+ document.dispatchEvent(new Event('click', { bubbles: true }));
  await nextTick();
  expect(onBeforeClose).toBeCalled();
  expect(onClose).toBeCalled();

packages/devui-vue/devui/drawer/src/use-drawer.ts

@@ -1,5 +1,5 @@
 import { computed, onUnmounted, ref, watch } from 'vue';
-import { onClickOutside } from '@vueuse/core';
+import { onClickOutside, OnClickOutsideOptions } from '@vueuse/core';
 import { DrawerEmit, DrawerProps, UseDrawerFn } from './drawer-types';
 import { lockScroll } from '../../shared/utils/lock-scroll';
 import { useNamespace } from '../../shared/hooks/use-namespace';
@@ -26,7 +26,7 @@ export function useDrawer(props: DrawerProps, emit: DrawerEmit): UseDrawerFn {
  e.code === 'Escape' && execClose();
  };
 
- onClickOutside(drawerRef, execClose);
+ onClickOutside(drawerRef, execClose, { capture: false } as OnClickOutsideOptions);
 
  const removeBodyAdditions = () => {
  lockScrollCb?.();

packages/devui-vue/devui/popover/src/popover.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, toRefs, ref, Teleport, Transition, watch, provide } from 'vue';
+import { defineComponent, toRefs, ref, Teleport, Transition, watch, provide, withModifiers } from 'vue';
 import { FlexibleOverlay } from '../../overlay';
 import { PopperTrigger } from '../../shared/components/popper-trigger';
 import { popoverProps, PopoverProps } from './popover-types';
@@ -48,6 +48,8 @@ export default defineComponent({
  style={overlayStyles.value}
  {...attrs}
  onPositionChange={handlePositionChange}
+ onClick={withModifiers(() => ({}), ['stop'])}
+ onPointerup={withModifiers(() => ({}), ['stop'])}
  onMouseenter={onMouseenter}
  onMouseleave={onMouseleave}>
  <PopoverIcon type={popType.value} />

packages/devui-vue/package.json

@@ -45,7 +45,7 @@
  "@floating-ui/dom": "^0.4.4",
  "@types/lodash-es": "^4.17.4",
  "@vue/shared": "^3.2.33",
- "@vueuse/core": "^7.7.1",
+ "@vueuse/core": "8.9.4",
  "async-validator": "^4.0.2",
  "dayjs": "^1.11.3",
  "devui-theme": "workspace:^0.0.1",