优化 HDropdown / HDropdownMenu / HTooltip 组件触发隐藏逻辑

fantastic-admin · Jan 6, 2024 · a08f6ef · a08f6ef
1 parent d58f359
commit a08f6ef
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 10 deletions.
diff --git a/src/layouts/components/AppSetting/index.vue b/src/layouts/components/AppSetting/index.vue
@@ -51,20 +51,20 @@ watch(copied, (val) => {
   }
 })
 
-interface AnyObject {
-  [key: string]: any
+function isObject(value: any) {
+  return typeof value === 'object' && !Array.isArray(value)
 }
 // 比较两个对象，并提取出不同的部分
-function getObjectDiff(originalObj: AnyObject, diffObj: AnyObject): AnyObject {
-  if (typeof originalObj !== 'object' || typeof diffObj !== 'object') {
+function getObjectDiff(originalObj: Record<string, any>, diffObj: Record<string, any>) {
+  if (!isObject(originalObj) || !isObject(diffObj)) {
     return diffObj
   }
-  const diff: AnyObject = {}
+  const diff: Record<string, any> = {}
   for (const key in diffObj) {
     const originalValue = originalObj[key]
     const diffValue = diffObj[key]
-    if (originalValue !== diffValue) {
-      if (typeof originalValue === 'object' && typeof diffValue === 'object') {
+    if (JSON.stringify(originalValue) !== JSON.stringify(diffValue)) {
+      if (isObject(originalValue) && isObject(diffValue)) {
         const nestedDiff = getObjectDiff(originalValue, diffValue)
         if (Object.keys(nestedDiff).length > 0) {
           diff[key] = nestedDiff

diff --git a/src/layouts/ui-kit/HDropdown.vue b/src/layouts/ui-kit/HDropdown.vue
@@ -1,5 +1,5 @@
 <template>
-  <VDropdown :triggers="['hover']" :popper-triggers="['hover']" :delay="200" v-bind="$attrs">
+  <VDropdown :show-triggers="['hover']" :hide-triggers="['hover']" :auto-hide="false" :popper-triggers="['hover']" :delay="200" v-bind="$attrs">
     <slot />
     <template #popper>
       <slot name="dropdown" />

diff --git a/src/layouts/ui-kit/HDropdownMenu.vue b/src/layouts/ui-kit/HDropdownMenu.vue
@@ -16,7 +16,7 @@ const myItems = computed(() => {
 </script>
 
 <template>
-  <VMenu :delay="200" v-bind="$attrs">
+  <VMenu :show-triggers="['hover']" :auto-hide="false" :popper-triggers="['hover', 'click']" :delay="200" v-bind="$attrs">
     <slot />
     <template #popper>
       <div v-for="(item, index) in myItems" :key="index" class="p-1" border-b="~ solid stone-2 dark:stone-7 last:size-0">

diff --git a/src/layouts/ui-kit/HTooltip.vue b/src/layouts/ui-kit/HTooltip.vue
@@ -10,7 +10,7 @@ withDefaults(
 </script>
 
 <template>
-  <VTooltip v-bind="$attrs">
+  <VTooltip :popper-triggers="['hover']" v-bind="$attrs">
     <slot />
     <template #popper>
       <slot name="text">