Browse Source

fix: 解决offset计算错误问题

suzigang 5 years ago
parent
commit
008caa4a02

+ 10 - 8
src/packages/sidenavbar/demo.vue

@@ -9,14 +9,16 @@
       </nut-cell>
       </nut-cell>
       <nut-popup position="right" v-model="show1" :style="{ width, height }">
       <nut-popup position="right" v-model="show1" :style="{ width, height }">
         <nut-sidenavbar :show="show1">
         <nut-sidenavbar :show="show1">
-          <nut-subsidenavbar title="图像理解" ikey="3" :open="false">
-            <nut-sidenavbaritem ikey="4" title="菜品识别"></nut-sidenavbaritem>
-            <nut-sidenavbaritem ikey="5" title="拍照购"></nut-sidenavbaritem>
-          </nut-subsidenavbar>
-          <nut-subsidenavbar title="自然语言处理" ikey="12">
-            <nut-sidenavbaritem ikey="13" title="词法分析"></nut-sidenavbaritem>
-            <nut-sidenavbaritem ikey="14" title="句法分析"></nut-sidenavbaritem>
-          </nut-subsidenavbar>
+            <nut-subsidenavbar title="智能城市AI" ikey="6">
+                <nut-subsidenavbar title="人体识别1" ikey="9">
+                    <nut-sidenavbaritem ikey="10" title="人体检测1"></nut-sidenavbaritem>
+                    <nut-sidenavbaritem ikey="11" title="细粒度人像分割1"></nut-sidenavbaritem>
+                </nut-subsidenavbar>
+                <nut-subsidenavbar title="人体识别2" ikey="12">
+                    <nut-sidenavbaritem ikey="13" title="人体检测2"></nut-sidenavbaritem>
+                    <nut-sidenavbaritem ikey="14" title="细粒度人像分割2"></nut-sidenavbaritem>
+                </nut-subsidenavbar>
+            </nut-subsidenavbar>
         </nut-sidenavbar>
         </nut-sidenavbar>
       </nut-popup>
       </nut-popup>
     </div>
     </div>

+ 9 - 7
src/packages/sidenavbar/doc.md

@@ -11,13 +11,15 @@
     :style="{ width, height }"
     :style="{ width, height }"
 >
 >
     <nut-sidenavbar :show="show1">
     <nut-sidenavbar :show="show1">
-        <nut-subsidenavbar title="图像理解" ikey="3" :open="false">
-            <nut-sidenavbaritem ikey="4" title="菜品识别"></nut-sidenavbaritem>
-            <nut-sidenavbaritem ikey="5" title="拍照购"></nut-sidenavbaritem>
-        </nut-subsidenavbar>
-        <nut-subsidenavbar title="自然语言处理" ikey="12">
-            <nut-sidenavbaritem ikey="13" title="词法分析"></nut-sidenavbaritem>
-            <nut-sidenavbaritem ikey="14" title="句法分析"></nut-sidenavbaritem>
+        <nut-subsidenavbar title="智能城市AI" ikey="6">
+            <nut-subsidenavbar title="人体识别1" ikey="9">
+                <nut-sidenavbaritem ikey="10" title="人体检测1"></nut-sidenavbaritem>
+                <nut-sidenavbaritem ikey="11" title="细粒度人像分割1"></nut-sidenavbaritem>
+            </nut-subsidenavbar>
+            <nut-subsidenavbar title="人体识别2" ikey="12">
+                <nut-sidenavbaritem ikey="13" title="人体检测2"></nut-sidenavbaritem>
+                <nut-sidenavbaritem ikey="14" title="细粒度人像分割2"></nut-sidenavbaritem>
+            </nut-subsidenavbar>
         </nut-subsidenavbar>
         </nut-subsidenavbar>
     </nut-sidenavbar>
     </nut-sidenavbar>
 </nut-popup>
 </nut-popup>

+ 8 - 6
src/packages/sidenavbar/sidenavbar.vue

@@ -17,17 +17,19 @@ export default {
     }
     }
   },
   },
   mounted() {
   mounted() {
+    this.handleSlots()
     this.observer = new MutationObserver(
     this.observer = new MutationObserver(
       function(mutations) {
       function(mutations) {
+        this.count = 1
         this.handleSlots();
         this.handleSlots();
       }.bind(this)
       }.bind(this)
     );
     );
 
 
     this.observer.observe(this.$refs.list, {
     this.observer.observe(this.$refs.list, {
-      attributes: true,
+      attributes: false,
       childList: true,
       childList: true,
-      characterData: true,
-      subtree: true
+      characterData: false,
+      subtree: false
     });
     });
   },
   },
   data() {
   data() {
@@ -52,12 +54,12 @@ export default {
       for (let i = 0; i < nodeList.length; i++) {
       for (let i = 0; i < nodeList.length; i++) {
         let item = nodeList[i];
         let item = nodeList[i];
         item.children[0].style.paddingLeft = this.offset * level + 'px';
         item.children[0].style.paddingLeft = this.offset * level + 'px';
-        if (item.className !== 'nut-sidenavbaritem') {
+        if (!item.className.includes('nut-sidenavbaritem')) {
           this.setPaddingLeft(Array.from(item.children[1].children), ++this.count);
           this.setPaddingLeft(Array.from(item.children[1].children), ++this.count);
         }
         }
       }
       }
-      this.count = 1;
+      this.count--
     }
     }
   }
   }
 };
 };
-</script>
+</script>