feat: 更新 f-menu 组件 on-menu-item-click 和 on-submenu-click 方法参数接收顺序

FightingDesign · Dec 11, 2023 · 2547e0a · 2547e0a
1 parent e157f67
commit 2547e0a
Show file tree

Hide file tree

Showing 6 changed files with 127 additions and 10 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 中文 | [英文](https://github.com/FightingDesign/fighting-design/blob/master/CHANGELOG.en-US.md)
 
+- 更新 `f-menu` 组件 `on-menu-item-click` 和 `on-submenu-click` 方法参数接收顺序
+
 ## 0.64.1 (2023-12-01)
 
 - 修复 `f-submenu` 组件折叠动画太慢的问题

diff --git a/docs/components/menu.md b/docs/components/menu.md
@@ -343,13 +343,13 @@ type MenuMode = 'horizontal' | 'vertical' | 'inline'
 ### MenuItemClick
 
 ```ts
-type MenuItemClick = (evt: MouseEvent, name: string) => void
+type MenuItemClick = (name: string, evt: MouseEvent) => void
 ```
 
 ### SubmenuClick
 
 ```ts
-type SubmenuClick = (evt: MouseEvent, target: boolean) => void
+type SubmenuClick = (target: boolean, evt: MouseEvent) => void
 ```
 
 ## Contributors

diff --git a/packages/fighting-design/menu-item/src/menu-item.vue b/packages/fighting-design/menu-item/src/menu-item.vue
@@ -38,7 +38,7 @@
        *
        * 传入事件对象和当前 name两个参数
        */
-      run(parentInject.onMenuItemClick, evt, prop.name)
+      run(parentInject.onMenuItemClick, prop.name, evt)
 
       /**
        * 设置当前选中的 name，传入当前组件的 name

diff --git a/packages/fighting-design/menu/src/interface.ts b/packages/fighting-design/menu/src/interface.ts
@@ -8,18 +8,18 @@ export type MenuMode = 'horizontal' | 'vertical' | 'inline'
 /**
  * menu-item 点击执行的回调类型
  *
- * @param { Object } evt 事件对象
  * @param { string } name 唯一标识
+ * @param { Object } evt 事件对象
  */
-export type MenuItemClick = (evt: MouseEvent, name: string) => void
+export type MenuItemClick = (name: string, evt: MouseEvent) => void
 
 /**
  * submenu 点击执行的回调类型
  *
- * @param { Object } evt 事件对象
  * @param { boolean } target 打开状态
+ * @param { Object } evt 事件对象
  */
-export type SubmenuClick = (evt: MouseEvent, target: boolean) => void
+export type SubmenuClick = (target: boolean, evt: MouseEvent) => void
 
 /**
  * 注入的依赖项类型接口

diff --git a/packages/fighting-design/submenu/src/submenu.vue b/packages/fighting-design/submenu/src/submenu.vue
@@ -34,7 +34,7 @@
      *
      * 传入 evt 和展示状态两个参数
      */
-    parentInject && run(parentInject.onSubmenuClick, evt, isOpened.value)
+    parentInject && run(parentInject.onSubmenuClick, isOpened.value, evt)
   }
 </script>
 

diff --git a/start/src/App.vue b/start/src/App.vue
@@ -1,3 +1,118 @@
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+  import {
+    FIconApps,
+    FIconBlock,
+    FIconCameraVideoSlash
+  } from '@fighting-design/fighting-icon'
+  import type { MenuItemClick } from 'fighting-design'
 
-<template></template>
+  /**
+   * 点击菜单栏的每一项触发
+   *
+   * @param evt
+   * @param name
+   */
+  const menuItemClick: MenuItemClick = (name: string, evt: MouseEvent) => {
+    console.log(evt, name)
+  }
+</script>
+
+<template>
+  <div class="main">
+    <!-- 左侧 -->
+    <div class="aside-left">
+      <f-menu mode="inline" active-name="/main/home" :on-menu-item-click="menuItemClick">
+        <f-menu-item name="/main/home" :icon="FIconApps">首页</f-menu-item>
+        <f-submenu>
+          <template #title>沟通管理</template>
+          <f-menu-item name="/communicate/message" :icon="FIconBlock">
+            信件沟通记录
+          </f-menu-item>
+          <f-menu-item name="/communicate/unread" :icon="FIconCameraVideoSlash">
+            医生未读信件
+          </f-menu-item>
+        </f-submenu>
+        <f-submenu>
+          <template #title>用户管理</template>
+          <f-menu-item name="/users/doctor" :icon="FIconBlock"> 医生管理 </f-menu-item>
+          <f-menu-item name="/users/patient" :icon="FIconCameraVideoSlash">
+            患者管理
+          </f-menu-item>
+        </f-submenu>
+        <f-submenu>
+          <template #title>订单管理</template>
+          <f-menu-item name="/transaction/list" :icon="FIconBlock">
+            订单列表
+          </f-menu-item>
+        </f-submenu>
+      </f-menu>
+    </div>
+    <!-- 中间的 -->
+    <div class="aside-center">
+      <f-card round> </f-card>
+    </div>
+    <!-- 右侧的 -->
+    <div class="aside-right">
+      <!-- 头像 -->
+      <f-tooltip content="查看资料" position="left">
+        <f-avatar
+          src="https://finecare-fxk.fxkang.com/assis/new-aie-user/avatar_user_default_1.png"
+          round
+          size="mini"
+          fit="cover"
+        />
+      </f-tooltip>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+  * {
+    margin: 0;
+    padding: 0;
+  }
+  .main {
+    width: 100vw;
+    height: 100vh;
+    display: flex;
+    background-color: #e9eefd;
+
+    .aside-left {
+      width: 200px;
+      height: 100vh;
+      background-color: #fff;
+      border-radius: 0 25px 25px 0;
+      overflow: hidden;
+    }
+
+    .aside-center {
+      flex: 1;
+      padding: 20px;
+      box-sizing: border-box;
+      max-height: 100vh;
+      overflow-y: auto;
+      overflow-x: hidden;
+
+      &::-webkit-scrollbar {
+        width: 0;
+      }
+
+      &::-webkit-scrollbar-thumb,
+      &::-webkit-scrollbar-track {
+        background-color: transparent;
+      }
+    }
+
+    .aside-right {
+      width: 60px;
+      height: 100vh;
+      background-color: #2d5af1;
+      border-radius: 25px 0 0 25px;
+      padding: 25px 0;
+      box-sizing: border-box;
+      flex-shrink: 0;
+      display: flex;
+      justify-content: center;
+    }
+  }
+</style>