搜索界面弹出时动画失效

fantastic-admin · Nov 16, 2023 · a079b02 · a079b02
1 parent bb135be
commit a079b02
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 25 deletions.
diff --git a/src/layouts/components/Search/index.vue b/src/layouts/components/Search/index.vue
@@ -55,7 +55,6 @@ const isShow = ref(false)
 const searchInput = ref('')
 const sourceList = ref<listTypes[]>([])
 const actived = ref(-1)
-const isScrollbarsInit = ref(false)
 
 const searchInputRef = ref()
 const searchResultRef = ref<OverlayScrollbarsComponentRef>()
@@ -262,7 +261,7 @@ function pageJump(path: listTypes['path'], link: listTypes['link']) {
 </script>
 
 <template>
-  <TransitionRoot as="template" :show="isShow" @after-leave="isScrollbarsInit = false">
+  <TransitionRoot as="template" :show="isShow">
     <Dialog :initial-focus="searchInputRef" class="fixed inset-0 flex z-2000" @close="isShow && eventBus.emit('global-search-toggle')">
       <TransitionChild as="template" v-bind="overlayTransitionClass">
         <div class="fixed inset-0 transition-opacity bg-stone-200/75 dark:bg-stone-8/75 backdrop-blur-sm" />
@@ -277,29 +276,27 @@ function pageJump(path: listTypes['path'], link: listTypes['link']) {
                   <input ref="searchInputRef" v-model="searchInput" placeholder="搜索页面，支持标题、URL模糊查询" class="w-full focus:outline-none border-0 rounded-md placeholder-stone-4 dark:placeholder-stone-5 text-base px-3 bg-transparent text-dark dark:text-white" @keydown.esc="eventBus.emit('global-search-toggle')" @keydown.up.prevent="keyUp" @keydown.down.prevent="keyDown" @keydown.enter.prevent="keyEnter">
                 </div>
                 <DialogDescription class="relative m-0 of-y-hidden">
-                  <OverlayScrollbarsComponent ref="searchResultRef" :options="{ scrollbars: { autoHide: 'leave', autoHideDelay: 300 } }" class="h-full" @os-initialized="isScrollbarsInit = true">
-                    <template v-if="isScrollbarsInit">
-                      <template v-if="resultList.length > 0">
-                        <a v-for="(item, index) in resultList" ref="searchResultItemRef" :key="item.path" class="flex items-center cursor-pointer" :class="{ 'bg-stone-2/40 dark:bg-stone-7/40': index === actived }" :data-index="index" @click="pageJump(item.path, item.link)" @mouseover="actived = index">
-                          <SvgIcon v-if="item.icon" :name="item.icon" :size="20" class="basis-16 transition" :class="{ 'scale-120 text-ui-primary': index === actived }" />
-                          <div class="flex-1 flex flex-col gap-1 px-4 py-3 truncate" border-l="~ solid stone-2 dark:stone-7">
-                            <div class="text-base font-bold truncate">{{ item.title ?? '[ 无标题 ]' }}</div>
-                            <Breadcrumb v-if="item.breadcrumb.length" class="truncate">
-                              <BreadcrumbItem v-for="(bc, bcIndex) in item.breadcrumb" :key="bcIndex" class="text-xs">
-                                {{ bc.title ?? '[ 无标题 ]' }}
-                              </BreadcrumbItem>
-                            </Breadcrumb>
-                          </div>
-                        </a>
-                      </template>
-                      <template v-else>
-                        <div flex="center col" py-6 text-stone-5>
-                          <SvgIcon name="tabler:mood-empty" :size="40" />
-                          <p text-base m-2>
-                            没有找到你想要的
-                          </p>
+                  <OverlayScrollbarsComponent ref="searchResultRef" :options="{ scrollbars: { autoHide: 'leave', autoHideDelay: 300 } }" defer class="h-full">
+                    <template v-if="resultList.length > 0">
+                      <a v-for="(item, index) in resultList" ref="searchResultItemRef" :key="item.path" class="flex items-center cursor-pointer" :class="{ 'bg-stone-2/40 dark:bg-stone-7/40': index === actived }" :data-index="index" @click="pageJump(item.path, item.link)" @mouseover="actived = index">
+                        <SvgIcon v-if="item.icon" :name="item.icon" :size="20" class="basis-16 transition" :class="{ 'scale-120 text-ui-primary': index === actived }" />
+                        <div class="flex-1 flex flex-col gap-1 px-4 py-3 truncate" border-l="~ solid stone-2 dark:stone-7">
+                          <div class="text-base font-bold truncate">{{ item.title ?? '[ 无标题 ]' }}</div>
+                          <Breadcrumb v-if="item.breadcrumb.length" class="truncate">
+                            <BreadcrumbItem v-for="(bc, bcIndex) in item.breadcrumb" :key="bcIndex" class="text-xs">
+                              {{ bc.title ?? '[ 无标题 ]' }}
+                            </BreadcrumbItem>
+                          </Breadcrumb>
                         </div>
-                      </template>
+                      </a>
+                    </template>
+                    <template v-else>
+                      <div flex="center col" py-6 text-stone-5>
+                        <SvgIcon name="tabler:mood-empty" :size="40" />
+                        <p text-base m-2>
+                          没有找到你想要的
+                        </p>
+                      </div>
                     </template>
                   </OverlayScrollbarsComponent>
                 </DialogDescription>

diff --git a/src/router/modules/jsx.example.ts b/src/router/modules/jsx.example.ts
@@ -17,7 +17,7 @@ const routes: RouteRecordRaw = {
     {
       path: 'index',
       name: 'jsxExampleIndex',
-      component: () => import('@/views/jsx_example/index.jsx'),
+      component: () => import('@/views/jsx_example/index.tsx'),
       meta: {
         title: 'JSX',
         sidebar: false,