refactor: 采用 vue 3.4 新增的 defineModel 宏

src/components/SearchMenu/SearchModal.vue

@@ -10,15 +10,8 @@ import { cloneDeep, debounce } from "lodash-es"
 import { DeviceEnum } from "@/constants/app-key"
 import { isExternal } from "@/utils/validate"
 
-interface Props {
+/** 控制 modal 显隐 */
-  /** 控制 modal 显隐 */
+const modelValue = defineModel<boolean>({ required: true })
-  modelValue: boolean
-}
-
-const props = defineProps<Props>()
-const emit = defineEmits<{
-  "update:modelValue": [boolean]
-}>()
 
 const appStore = useAppStore()
 const router = useRouter()
@@ -35,15 +28,6 @@ const isPressUpOrDown = ref<boolean>(false)
 
 /** 控制搜索对话框宽度 */
 const modalWidth = computed(() => (appStore.device === DeviceEnum.Mobile ? "80vw" : "40vw"))
-/** 控制搜索对话框显隐 */
-const modalVisible = computed({
-  get() {
-    return props.modelValue
-  },
-  set(value: boolean) {
-    emit("update:modelValue", value)
-  }
-})
 /** 树形菜单 */
 const menusData = computed(() => cloneDeep(usePermissionStore().routes))
 
@@ -69,7 +53,7 @@ const flatTree = (arr: RouteRecordRaw[], result: RouteRecordRaw[] = []) => {
 
 /** 关闭搜索对话框 */
 const handleClose = () => {
-  modalVisible.value = false
+  modelValue.value = false
   // 延时处理防止用户看到重置数据的操作
   setTimeout(() => {
     keyword.value = ""
@@ -166,7 +150,7 @@ const handleReleaseUpOrDown = () => {
 
 <template>
   <el-dialog
-    v-model="modalVisible"
+    v-model="modelValue"
     @opened="inputRef?.focus()"
     @closed="inputRef?.blur()"
     @keydown.up="handleUp"

src/components/SearchMenu/SearchResult.vue

@@ -1,34 +1,22 @@
 <script lang="ts" setup>
-import { computed, getCurrentInstance, onBeforeMount, onBeforeUnmount, onMounted, ref } from "vue"
+import { getCurrentInstance, onBeforeMount, onBeforeUnmount, onMounted, ref } from "vue"
 import { type RouteRecordName, type RouteRecordRaw } from "vue-router"
 
 interface Props {
-  modelValue: RouteRecordName | undefined
   list: RouteRecordRaw[]
   isPressUpOrDown: boolean
 }
 
+/** 选中的菜单 */
+const modelValue = defineModel<RouteRecordName | undefined>({ required: true })
 const props = defineProps<Props>()
-const emit = defineEmits<{
-  "update:modelValue": [RouteRecordName | undefined]
-}>()
 
 const instance = getCurrentInstance()
 const scrollbarHeight = ref<number>(0)
 
-/** 选中的菜单 */
-const activeRouteName = computed({
-  get() {
-    return props.modelValue
-  },
-  set(value: RouteRecordName | undefined) {
-    emit("update:modelValue", value)
-  }
-})
-
 /** 菜单的样式 */
 const itemStyle = (item: RouteRecordRaw) => {
-  const flag = item.name === activeRouteName.value
+  const flag = item.name === modelValue.value
   return {
     background: flag ? "var(--el-color-primary)" : "",
     color: flag ? "#fff" : ""
@@ -39,7 +27,7 @@ const itemStyle = (item: RouteRecordRaw) => {
 const handleMouseenter = (item: RouteRecordRaw) => {
   // 如果上键或下键与 mouseenter 事件同时生效，则以上下键为准，不执行该函数的赋值逻辑
   if (props.isPressUpOrDown) return
-  activeRouteName.value = item.name
+  modelValue.value = item.name
 }
 
 /** 计算滚动可视区高度 */
@@ -91,7 +79,7 @@ defineExpose({ getScrollTop })
       <span class="result-item-title">
         {{ item.meta?.title }}
       </span>
-      <SvgIcon v-if="activeRouteName && activeRouteName === item.name" name="keyboard-enter" />
+      <SvgIcon v-if="modelValue && modelValue === item.name" name="keyboard-enter" />
     </div>
   </div>
 </template>