refactor: 重构searchModal剩余事件处理

longyi-xw · Feb 13, 2024 · 6cb6e2a · 6cb6e2a
1 parent cb91389
commit 6cb6e2a
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 23 deletions.
diff --git a/src/components/Screenfull/index.vue b/src/components/Screenfull/index.vue
@@ -64,21 +64,21 @@ const handleContentLargeClick = () => {
 <template>
   <div>
     <!-- 全屏 -->
-    <el-tooltip v-if="!content" effect="dark" :content="fullscreenTips" placement="bottom">
+    <a-tooltip v-if="!content" :title="fullscreenTips" placement="bottom">
       <SvgIcon :name="fullscreenSvgName" @click="handleFullscreenClick" />
-    </el-tooltip>
+    </a-tooltip>
     <!-- 内容区 -->
-    <el-dropdown v-else>
+    <a-dropdown v-else>
       <SvgIcon :name="contentLargeSvgName" />
-      <template #dropdown>
-        <el-dropdown-menu>
+      <template #overlay>
+        <a-menu>
           <!-- 内容区放大 -->
-          <el-dropdown-item @click="handleContentLargeClick">{{ contentLargeTips }}</el-dropdown-item>
+          <a-menu-item @click="handleContentLargeClick">{{ contentLargeTips }}</a-menu-item>
           <!-- 内容区全屏 -->
-          <el-dropdown-item @click="handleFullscreenClick" :disabled="isFullscreen">内容区全屏</el-dropdown-item>
-        </el-dropdown-menu>
+          <a-menu-item @click="handleFullscreenClick" :disabled="isFullscreen">内容区全屏</a-menu-item>
+        </a-menu>
       </template>
-    </el-dropdown>
+    </a-dropdown>
   </div>
 </template>
 

diff --git a/src/components/SearchMenu/SearchModal.vue b/src/components/SearchMenu/SearchModal.vue
@@ -165,19 +165,18 @@ const handleReleaseUpOrDown = () => {
 </script>
 
 <template>
-  <el-dialog
-    v-model="modalVisible"
+  <a-modal
+    v-model:open="modalVisible"
     @opened="inputRef?.focus()"
-    @closed="inputRef?.blur()"
+    @cancel="inputRef?.blur()"
     @keydown.up="handleUp"
     @keydown.down="handleDown"
     @keydown.enter="handleEnter"
     @keyup.up.down="handleReleaseUpOrDown"
-    :before-close="handleClose"
+    :afterClose="handleClose"
     :width="modalWidth"
-    top="5vh"
+    :closable="false"
     class="search-modal__private"
-    append-to-body
   >
     <a-input
       ref="inputRef"
@@ -191,7 +190,7 @@ const handleReleaseUpOrDown = () => {
         <SvgIcon name="search" />
       </template>
     </a-input>
-    <el-empty v-if="resultList.length === 0" description="暂无搜索结果" :image-size="100" />
+    <a-empty v-if="resultList.length === 0" description="暂无搜索结果" />
     <template v-else>
       <p>搜索结果</p>
       <el-scrollbar ref="scrollbarRef" max-height="40vh" always>
@@ -207,7 +206,7 @@ const handleReleaseUpOrDown = () => {
     <template #footer>
       <SearchFooter :total="resultList.length" />
     </template>
-  </el-dialog>
+  </a-modal>
 </template>
 
 <style lang="scss">
@@ -216,13 +215,13 @@ const handleReleaseUpOrDown = () => {
     font-size: 18px;
   }
 
-  .el-dialog__header {
-    display: none;
+  .ant-empty {
+    padding: 40px 0;
   }
 
-  .el-dialog__footer {
+  .ant-modal-footer {
     border-top: 1px solid var(--el-border-color);
-    padding: var(--el-dialog-padding-primary);
+    padding: 16px;
   }
 }
 </style>
diff --git a/src/components/SearchMenu/index.vue b/src/components/SearchMenu/index.vue
@@ -12,9 +12,9 @@ const handleOpen = () => {
 
 <template>
   <div>
-    <el-tooltip effect="dark" content="搜索菜单" placement="bottom">
+    <a-tooltip title="搜索菜单" placement="bottom">
       <SvgIcon name="search" @click="handleOpen" />
-    </el-tooltip>
+    </a-tooltip>
     <SearchModal v-model="modalVisible" />
   </div>
 </template>