HcTopMenu.vue 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
  1. <template>
  2. <el-scrollbar>
  3. <div class="hc-header-top-menu-bar">
  4. <template v-for="(item, index) in topMenuData" :key="index">
  5. <div class="item" :class="curKey === item?.code ? 'cur' : '' " @click="topMenuClick(item)">{{ item?.name }}</div>
  6. </template>
  7. </div>
  8. </el-scrollbar>
  9. </template>
  10. <script setup>
  11. import { ref, watch } from 'vue'
  12. import { useRoute } from 'vue-router'
  13. import { useAppStore } from '~src/store'
  14. import HcTopMenu from '~src/plugins/HcTopMenu'
  15. import { getArrValue } from 'js-fast-way'
  16. const emit = defineEmits(['change', 'load'])
  17. //初始组合式
  18. const useRoutes = useRoute()
  19. const store = useAppStore()
  20. //处理菜单数据
  21. const setMenuItem = async (item) => {
  22. emit('change', await HcTopMenu.setMenuItem(item))
  23. }
  24. //监听菜单数据
  25. const topMenuData = ref([])
  26. watch(() => store.getMenus, (val) => {
  27. topMenuData.value = getArrValue(val)
  28. }, { immediate: true, deep: true })
  29. //监听路由数据
  30. const curKey = ref('')
  31. watch(() => useRoutes, (val) => {
  32. HcTopMenu.initMenu({
  33. routes: val,
  34. menu: topMenuData.value,
  35. load: (key) => {
  36. curKey.value = key
  37. emit('load', key)
  38. },
  39. change: (key, item) => {
  40. curKey.value = key
  41. setMenuItem(item)
  42. },
  43. })
  44. }, { immediate: true, deep: true })
  45. //菜单被点击
  46. const topMenuClick = (item) => {
  47. setMenuItem(item)
  48. }
  49. </script>
  50. <style lang="scss">
  51. .hc-header-top-menu-bar {
  52. position: relative;
  53. height: 100%;
  54. display: flex;
  55. align-items: center;
  56. .item {
  57. position: relative;
  58. cursor: pointer;
  59. padding: 6px 8px;
  60. border-radius: 3px;
  61. color: #efefef;
  62. transition: background .2s, color .2s;
  63. &:hover {
  64. color: white;
  65. background: var(--el-color-primary-dark-2);
  66. }
  67. &.cur {
  68. color: white;
  69. background: var(--el-color-primary-dark-2);
  70. }
  71. }
  72. .item + .item {
  73. margin-left: 2px;
  74. }
  75. }
  76. </style>