feat: 组件menu的model支持类型Number (#68)

* fix: 组件menu支持model类型Number * docs: menu文档 * feat: menu支持value类型为number，逻辑完善
WeBankFinTech · Mar 11, 2022 · 5a97901 · 5a97901
1 parent 0f24ada
commit 5a97901
Show file tree

Hide file tree

Showing 6 changed files with 11 additions and 8 deletions.
diff --git a/components/menu/const.ts b/components/menu/const.ts
@@ -16,7 +16,7 @@ export const MENU_KEY = Symbol('FMenu');
 export const MENU_PROPS = {
     // 当前选中的值
     modelValue: {
-        type: String,
+        type: [String, Number],
     },
     // 垂直或者水平
     mode: {

diff --git a/components/menu/interface.ts b/components/menu/interface.ts
@@ -1,7 +1,7 @@
 import type { Ref, VNodeChild } from 'vue';
 
 export interface MenuOption {
-    value: string;
+    value: string | number;
     label: string | (() => VNodeChild);
     icon: () => VNodeChild;
     children: MenuOption[];
@@ -10,7 +10,7 @@ export interface MenuOption {
 
 export interface MenuItemType {
     uid: string;
-    value: string;
+    value: string | number;
     type: string;
     children: MenuItemType[];
     isOpened: Ref<boolean>;

diff --git a/components/menu/menuItem.tsx b/components/menu/menuItem.tsx
@@ -19,7 +19,7 @@ export default defineComponent({
     },
     props: {
         value: {
-            type: String,
+            type: [String, Number],
             required: true,
         },
         label: String,

diff --git a/components/menu/subMenu.tsx b/components/menu/subMenu.tsx
@@ -27,7 +27,7 @@ export default defineComponent({
     },
     props: {
         value: {
-            type: String,
+            type: [String, Number],
             default: null,
         },
         label: String,

diff --git a/docs/.vitepress/components/menu/index.md b/docs/.vitepress/components/menu/index.md
@@ -55,7 +55,7 @@ app.use(FMenu);
 
 | 属性                | 说明                                                 | 类型    | 默认值       |
 | ------------------- | ---------------------------------------------------- | ------- | ------------ |
-| modelValue(v-model) | 当前选中菜单标识符                                   | string  | `null`       |
+| modelValue(v-model) | 当前选中菜单标识符                                   | string / number | `null`       |
 | mode                | 模式，可选值有`horizontal`和`vertical`               | string  | `horizontal` |
 | collapsed           | 是否水平折叠收起菜单（仅在 mode 为 vertical 时可用） | boolean | `false`      |
 | inverted            | 是否反转样式                                         | boolean | `false`      |

diff --git a/docs/.vitepress/components/menu/options.vue b/docs/.vitepress/components/menu/options.vue
@@ -1,12 +1,14 @@
 <template>
-    <f-menu :options="options"></f-menu>
+    <f-menu v-model="value" :options="options"></f-menu>
 </template>
 <script>
 import { ref, h } from 'vue';
 // eslint-disable-next-line import/no-unresolved
 import { AppstoreOutlined } from '@fesjs/fes-design/icon';
 export default {
     setup() {
+        const value = ref(2);
+
         const options = [
             {
                 label: () => '我是子菜单',
@@ -57,14 +59,15 @@ export default {
             },
             {
                 label: '人群管理',
-                value: '2',
+                value: 2,
             },
             {
                 label: '资源管理',
                 value: '3',
             },
         ];
         return {
+            value,
             options,
         };
     },