menus hover菜单

client/src/views/OaSystem/oaLayout/menus.vue

@@ -20,20 +20,18 @@
     </div>
     <div class="menus-tabs">
       <el-menu default-active="2" class="el-menu-vertical-demo">
-        <div v-for="(item, index) in reactiveData.routes" :key="index">
-          <!-- <el-sub-menu :index="String(index)" v-if="item.children">
-            <template #title>
-              <Icon :icon="item.icon" />
-              <span>{{ item.name }}</span>
-            </template>
-            <el-menu-item @click="menuClick(item, i)" v-for="(l, i) in item.children" :key="i">{{
-              l.name
-            }}</el-menu-item>
-          </el-sub-menu> -->
+        <div
+          v-for="(item, index) in reactiveData.routes"
+          :key="index"
+          class="menuDiv"
+          @mouseenter="handleMouseEnter(item, index)"
+          @mouseleave="handleMouseLeave(item, index)"
+        >
           <el-menu-item @click="menuClick(item, index)" :index="String(index)">
             <Icon :icon="item.icon" />
             <span>{{ item.name }}</span>
           </el-menu-item>
+          <MenusActive :menuData="menuData" v-if="mouseenterIndex == index" />
         </div>
       </el-menu>
     </div>
@@ -44,11 +42,10 @@ import { Icon } from '@/components/Icon'
 import { useRouter } from 'vue-router'
 import { ElMessageBox } from 'element-plus'
 import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
-import { useDesign } from '@/hooks/web/useDesign'
 import avatarImg from '@/assets/imgs/avatar.gif'
 import { useUserStore } from '@/store/modules/user'
 import { useTagsViewStore } from '@/store/modules/tagsView'
-import { useAppStore } from '@/store/modules/app'
+import MenusActive from './menusActive.vue'
 defineOptions({ name: 'Header' })
 const { t } = useI18n()
 
@@ -57,19 +54,15 @@ const { wsCache } = useCache()
 const { push, replace } = useRouter()
 
 const userStore = useUserStore()
-const appStore = useAppStore()
 const tagsViewStore = useTagsViewStore()
 
-const { getPrefixCls } = useDesign()
-
-const prefixCls = getPrefixCls('user-info')
-
 const user = wsCache.get(CACHE_KEY.USER)
 
 const avatar = user.user.avatar ? user.user.avatar : avatarImg
 
 const userName = user.user.nickname ? user.user.nickname : 'Admin'
-const titleName = ref(appStore.title)
+
+const mouseenterIndex = ref(-1)
 const loginOut = () => {
   ElMessageBox.confirm(t('common.loginOutMessage'), t('common.reminder'), {
     confirmButtonText: t('common.ok'),
@@ -83,14 +76,10 @@ const loginOut = () => {
     })
     .catch(() => {})
 }
-const toProfile = async () => {
-  push('/user/profile')
-}
 
 const reactiveData: any = reactive({
   routes: []
 })
-const headerTitleName: any = ref('') // 标题名称
 const router = useRouter()
 
 const initMenus = async () => {
@@ -98,20 +87,34 @@ const initMenus = async () => {
   let locals: any = localStorage.getItem('roleRouters')
   let roleRouters = JSON.parse(JSON.parse(locals).v)[0].children
 
-  let childName = uid.name
   let childArr = roleRouters.slice(0, roleRouters.length)
   reactiveData.routes = childArr
 }
 
 const menuClick = (item: any, idx: any) => {
-  if (item.children) {
-    push('/oaSystem/' + item.path + '/' + item.children[idx].path)
-  } else {
+  // if (item.children) {
+  //   push('/oaSystem/' + item.path + '/' + item.children[idx].path)
+  // } else {
+  //   push('/oaSystem/' + item.path)
+  // }
+  if (item.children == null) {
     push('/oaSystem/' + item.path)
+  } else {
+    return
   }
-  // push(item.path)
 }
-
+const menuData = ref()
+const handleMouseEnter = (item: any, index: any) => {
+  if (item.children != null) {
+    mouseenterIndex.value = index
+    menuData.value = item
+  } else {
+    mouseenterIndex.value = -1
+  }
+}
+const handleMouseLeave = (item: any, index: any) => {
+  mouseenterIndex.value = -1
+}
 /** 初始化 **/
 onMounted(() => {
   initMenus()
@@ -208,6 +211,9 @@ onMounted(() => {
   .menus-tabs {
     width: 100%;
     height: calc(100% - 250px);
+    .menuDiv {
+      position: relative;
+    }
   }
 }
 

client/src/views/OaSystem/oaLayout/menusActive.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="menusActive">
+    <ul>
+      <li v-for="(item, index) in menuList" @click="menuClick(item, index)" :key="index">
+        {{ item.name }}
+      </li>
+    </ul>
+  </div>
+</template>
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+const { push } = useRouter()
+const props = defineProps({
+  menuData: {
+    type: Object
+  }
+})
+
+const menuList = ref(props.menuData.children)
+const pushName = ref(props.menuData.path)
+
+const menuClick = (item, index) => {
+  console.log('/oaSystem/' + pushName.value + '/' + item.path)
+
+  push('/oaSystem/' + pushName.value + '/' + item.path)
+}
+
+/** 初始化 **/
+onMounted(() => {})
+</script>
+<style lang="scss" scoped>
+.menusActive {
+  position: absolute;
+  right: -200px;
+  top: 0;
+  width: 200px;
+  height: 200px;
+  height: auto;
+  padding: 15px;
+  background-color: #fff;
+  z-index: 9999;
+  ul {
+    width: 100%;
+
+    li {
+      width: auto;
+      height: 30px;
+      cursor: pointer;
+    }
+  }
+}
+</style>