fix: 修复 Menu 组件的 TS 问题 (jd-opensource#798)

zhouLion · Oct 28, 2021 · 612cdcc · 612cdcc
1 parent 5a3f44d
commit 612cdcc
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 32 deletions.
diff --git a/src/packages/__VUE/menu/demo.vue b/src/packages/__VUE/menu/demo.vue
@@ -68,12 +68,12 @@ export default createDemo({
 
     const item = ref<HTMLElement>();
 
-    const handleChoose = (val, index) => {
+    const handleChoose = (val: string, index: string | number) => {
       console.log(val, index);
     };
 
     const handleClick = () => {
-      item.value.toggle();
+      (item.value as any).toggle();
     };
 
     return {

diff --git a/src/packages/__VUE/menu/index.scss b/src/packages/__VUE/menu/index.scss
@@ -47,6 +47,9 @@
     ul {
       display: flex;
       flex-wrap: wrap;
+      list-style: none;
+      margin: 0;
+      padding: 0;
     }
 
     li {

diff --git a/src/packages/__VUE/menu/index.taro.vue b/src/packages/__VUE/menu/index.taro.vue
@@ -77,7 +77,18 @@ export default create({
   },
   emits: ['choose'],
   setup(props, { slots, emit }) {
-    const menuList = reactive([]);
+    interface IOption {
+      text: string,
+      value: string | number
+    }
+
+    interface IMenuItem {
+      title: string,
+      disabled: boolean,
+      options?: Array<IOption>
+    }
+
+    const menuList:Array<IMenuItem> = reactive([]);
     let activeTitle = ref('');
     let showMask = ref(false);
     let styleObj = reactive({
@@ -87,22 +98,24 @@ export default create({
     let hasOptions = ref(true);
     let isShowCustomer = ref(false);
 
-    for (let i = 0; i < slots.default().length; i++) {
-      if (slots.default()[i].type['name'] === 'nut-menu-item') {
-        let item = {
-          title: slots.default()[i].props['title'],
-          disabled: !!slots.default()[i].props['disabled']
-        };
-        if (slots.default()[i].props['options']) {
-          item['options'] = slots.default()[i].props['options'];
-        } else {
-          hasOptions.value = false;
+    if(slots.default){
+      for (let i = 0; i < slots.default().length; i++) {
+        if ((slots.default()[i] as any).type['name'] === 'nut-menu-item') {
+          let item:IMenuItem = {
+            title: (slots.default()[i] as any).props['title'],
+            disabled: !!(slots.default()[i] as any).props['disabled']
+          };
+          if ((slots.default()[i] as any).props['options']) {
+            item['options'] = (slots.default()[i] as any).props['options'];
+          } else {
+            hasOptions.value = false;
+          }
+          menuList.push(item);
         }
-        menuList.push(item);
       }
     }
 
-    const handleClickTitle = (title, index) => {
+    const handleClickTitle = (title: string, index: number) => {
       if (!hasOptions.value) {
         if (activeTitle.value) {
           activeTitle.value = '';
@@ -141,7 +154,7 @@ export default create({
       }
     };
 
-    const handleClickOption = (text, index, value) => {
+    const handleClickOption = (text: string, index: number, value: string | number) => {
       menuList[index].title = text;
       activeTitle.value = '';
       showMask.value = false;

diff --git a/src/packages/__VUE/menu/index.vue b/src/packages/__VUE/menu/index.vue
@@ -77,7 +77,18 @@ export default create({
   },
   emits: ['choose'],
   setup(props, { slots, emit }) {
-    const menuList = reactive([]);
+    interface IOption {
+      text: string,
+      value: string | number
+    }
+
+    interface IMenuItem {
+      title: string,
+      disabled: boolean,
+      options?: Array<IOption>
+    }
+
+    const menuList:Array<IMenuItem> = reactive([]);
     let activeTitle = ref('');
     let showMask = ref(false);
     let styleObj = reactive({
@@ -87,22 +98,24 @@ export default create({
     let hasOptions = ref(true);
     let isShowCustomer = ref(false);
 
-    for (let i = 0; i < slots.default().length; i++) {
-      if (slots.default()[i].type['name'] === 'nut-menu-item') {
-        let item = {
-          title: slots.default()[i].props['title'],
-          disabled: !!slots.default()[i].props['disabled']
-        };
-        if (slots.default()[i].props['options']) {
-          item['options'] = slots.default()[i].props['options'];
-        } else {
-          hasOptions.value = false;
+    if(slots.default){
+      for (let i = 0; i < slots.default().length; i++) {
+        if ((slots.default()[i] as any).type['name'] === 'nut-menu-item') {
+          let item:IMenuItem = {
+            title: (slots.default()[i] as any).props['title'],
+            disabled: !!(slots.default()[i] as any).props['disabled']
+          };
+          if ((slots.default()[i] as any).props['options']) {
+            item['options'] = (slots.default()[i] as any).props['options'];
+          } else {
+            hasOptions.value = false;
+          }
+          menuList.push(item);
         }
-        menuList.push(item);
       }
     }
 
-    const handleClickTitle = (title, index) => {
+    const handleClickTitle = (title: string, index: number) => {
       if (!hasOptions.value) {
         if (activeTitle.value) {
           activeTitle.value = '';
@@ -141,7 +154,7 @@ export default create({
       }
     };
 
-    const handleClickOption = (text, index, value) => {
+    const handleClickOption = (text: string, index: number, value: string | number) => {
       menuList[index].title = text;
       activeTitle.value = '';
       showMask.value = false;

diff --git a/src/sites/mobile-taro/vue/src/nav/pages/menu/index.vue b/src/sites/mobile-taro/vue/src/nav/pages/menu/index.vue
@@ -66,12 +66,12 @@ export default {
 
     const item = ref<HTMLElement>();
 
-    const handleChoose = (val, index) => {
+    const handleChoose = (val: string, index: string | number) => {
       console.log(val, index);
     };
 
     const handleClick = () => {
-      item.value.toggle();
+      (item.value as any).toggle();
     };
 
     return {