修复tab标签中数据更新不渲染页面的问题 jd-opensource#215

ZrbJava · Mar 2, 2020 · 0ef8a0d · 0ef8a0d
1 parent 8bb330f
commit 0ef8a0d
Show file tree

Hide file tree

Showing 3 changed files with 164 additions and 24 deletions.
diff --git a/src/packages/tab/demo.vue b/src/packages/tab/demo.vue
@@ -2,6 +2,12 @@
   <div>
     <!-- DEMO区域 -->
     <h4>默认用法</h4>
+    <nut-tab @tab-switch="tabSwitch">
+        <nut-tab-panel tabTitle="页签1">页签1</nut-tab-panel>
+        <nut-tab-panel tabTitle="页签2">页签2</nut-tab-panel>
+        <nut-tab-panel tabTitle="页签3">页签3</nut-tab-panel>
+    </nut-tab>
+    <h4>支持导航条在上下左右位置</h4>
     <nut-tab @tab-switch="tabSwitch">
       <nut-tab-panel
         v-for="value in editableTabs"
@@ -11,8 +17,6 @@
         v-html="value.content"
       ></nut-tab-panel>
     </nut-tab>
-
-    <h4>支持导航条在上下左右位置</h4>
     <nut-tab @tab-switch="tabSwitch" positionNav="left">
       <nut-tab-panel
         v-for="value in editableTabs"
@@ -42,7 +46,9 @@
     </nut-tab>
 
     <h4>禁止选中，默认选中某个标签</h4>
-    <nut-tab :defIndex="1" class="customer-css" @tab-switch="tabSwitch" :contentShow="true">
+    <h4>如需要更新页面，请将监听变化的数据传入init-data</h4>
+
+    <nut-tab :defIndex="1" class="customer-css" @tab-switch="tabSwitch" :contentShow="true" :init-data="disableTabs">
       <nut-tab-panel
         v-for="value in disableTabs"
         v-bind:key="value.tabTitle"
@@ -51,11 +57,19 @@
         v-html="value.content"
       ></nut-tab-panel>
     </nut-tab>
+    <div style="width:100%;height=50px;text-align:center">
+      <Button @click="resetHandler" type="light">重置Tab页面</Button>
+      <Button @click="clickHandler">更新Tab页面</Button>
+    </div>
   </div>
 </template>
 
 <script>
+import Button from '../button/button.vue';
 export default {
+  components:{
+    Button
+  },
   data() {
     return {
       positionNavCurr: "top",
@@ -117,6 +131,65 @@ export default {
   methods: {
     tabSwitch: function(index, event) {
       console.log(index + "--" + event.target);
+    },
+    clickHandler:function(){
+      let newEditableTabs = [
+        {
+          tabTitle: "衣物2",
+          iconUrl:
+            "http://img13.360buyimg.com/uba/jfs/t27280/289/2061314663/2392/872e32ff/5bf76318Ndc80c1d8.jpg",
+          content: "<p>改变衣物内容</p>"
+        },
+        {
+          tabTitle: "日用品2",
+          iconUrl:
+            "http://img13.360buyimg.com/uba/jfs/t30331/209/562746340/2190/6619973d/5bf763aaN6ff02099.jpg",
+          content: "<p>改变日用品内容</p>"
+        },
+        {
+          tabTitle: "器材2",
+          iconUrl:
+            "http://img20.360buyimg.com/uba/jfs/t30346/262/553689202/2257/5dfa3983/5bf76407N72deabf4.jpg",
+          content: "<p>改变运动器材内容</p>"
+        },
+        {
+          tabTitle: "电影票2",
+          iconUrl:
+            "http://img10.360buyimg.com/uba/jfs/t26779/215/2118525153/2413/470d1613/5bf767b2N075957b7.jpg",
+          content: "<p>改变电影票内容</p>"
+        }
+      ]
+      this.disableTabs = newEditableTabs;
+    },
+    resetHandler:function(){
+        let newEditableTabs = [
+        {
+          tabTitle: "衣物",
+          disable: false,
+          iconUrl:
+            "http://img13.360buyimg.com/uba/jfs/t27280/289/2061314663/2392/872e32ff/5bf76318Ndc80c1d8.jpg",
+          content: "<p>衣物内容</p>"
+        },
+        {
+          tabTitle: "日用品",
+          iconUrl:
+            "http://img13.360buyimg.com/uba/jfs/t30331/209/562746340/2190/6619973d/5bf763aaN6ff02099.jpg",
+          content: "<p>日用品内容</p>"
+        },
+        {
+          tabTitle: "运动器材",
+          iconUrl:
+            "http://img20.360buyimg.com/uba/jfs/t30346/262/553689202/2257/5dfa3983/5bf76407N72deabf4.jpg",
+          content: "<p>运动器材内容</p>"
+        },
+        {
+          tabTitle: "电影票",
+          iconUrl:
+            "http://img10.360buyimg.com/uba/jfs/t26779/215/2118525153/2413/470d1613/5bf767b2N075957b7.jpg",
+          content: "<p>电影票内容</p>"
+        }
+      ]
+      this.disableTabs = newEditableTabs;
     }
   }
 };

diff --git a/src/packages/tab/doc.md b/src/packages/tab/doc.md
@@ -72,27 +72,26 @@ export default {
 };
 ```
 
-禁止选中，默认选中某个标签
+禁止选中，默认选中某个标签,如需更新数组后，重新渲染Tab页面，请将更新数组传入init-data
 
 ```html
-<nut-tab 
-  :defIndex="1"
-  class="customer-css" 
-  @tab-switch="tabSwitch"
-  :contentShow="true"
->
-    <nut-tab-panel 
-      v-for='value in disableTabs' 
-      v-bind:key="value.tabTitle" 
-      :tabTitle="value.tabTitle" 
-      :disable = "value.disable" 
-      v-html="value.content"
-    >
-    </nut-tab-panel>
+<nut-tab :defIndex="1" class="customer-css" @tab-switch="tabSwitch" :contentShow="true" :init-data="disableTabs">
+    <nut-tab-panel
+    v-for="value in disableTabs"
+    v-bind:key="value.tabTitle"
+    :tabTitle="value.tabTitle"
+    :disable="value.disable"
+    v-html="value.content"
+  ></nut-tab-panel>
 </nut-tab>
+<div style="width:100%;height=50px;text-align:center">
+  <Button @click="resetHandler" type="light">重置Tab页面</Button>
+  <Button @click="clickHandler">更新Tab页面</Button>
+</div>
 ```
 
 ```javascript
+import Button from '../button/button.vue';
 export default {
   data() {
     return {
@@ -125,6 +124,65 @@ export default {
   methods: {
       tabSwitch:function(index,event){
         console.log(index+'--'+event.target);
+      },
+      clickHandler:function(){
+        let newEditableTabs = [
+          {
+            tabTitle: "衣物2",
+            iconUrl:
+              "http://img13.360buyimg.com/uba/jfs/t27280/289/2061314663/2392/872e32ff/5bf76318Ndc80c1d8.jpg",
+            content: "<p>改变衣物内容</p>"
+          },
+          {
+            tabTitle: "日用品2",
+            iconUrl:
+              "http://img13.360buyimg.com/uba/jfs/t30331/209/562746340/2190/6619973d/5bf763aaN6ff02099.jpg",
+            content: "<p>改变日用品内容</p>"
+          },
+          {
+            tabTitle: "器材2",
+            iconUrl:
+              "http://img20.360buyimg.com/uba/jfs/t30346/262/553689202/2257/5dfa3983/5bf76407N72deabf4.jpg",
+            content: "<p>改变运动器材内容</p>"
+          },
+          {
+            tabTitle: "电影票2",
+            iconUrl:
+              "http://img10.360buyimg.com/uba/jfs/t26779/215/2118525153/2413/470d1613/5bf767b2N075957b7.jpg",
+            content: "<p>改变电影票内容</p>"
+          }
+        ]
+        this.disableTabs = newEditableTabs;
+      },
+      resetHandler:function(){
+          let newEditableTabs = [
+          {
+            tabTitle: "衣物",
+            disable: false,
+            iconUrl:
+              "http://img13.360buyimg.com/uba/jfs/t27280/289/2061314663/2392/872e32ff/5bf76318Ndc80c1d8.jpg",
+            content: "<p>衣物内容</p>"
+          },
+          {
+            tabTitle: "日用品",
+            iconUrl:
+              "http://img13.360buyimg.com/uba/jfs/t30331/209/562746340/2190/6619973d/5bf763aaN6ff02099.jpg",
+            content: "<p>日用品内容</p>"
+          },
+          {
+            tabTitle: "运动器材",
+            iconUrl:
+              "http://img20.360buyimg.com/uba/jfs/t30346/262/553689202/2257/5dfa3983/5bf76407N72deabf4.jpg",
+            content: "<p>运动器材内容</p>"
+          },
+          {
+            tabTitle: "电影票",
+            iconUrl:
+              "http://img10.360buyimg.com/uba/jfs/t26779/215/2118525153/2413/470d1613/5bf767b2N075957b7.jpg",
+            content: "<p>电影票内容</p>"
+          }
+        ]
+        this.disableTabs = newEditableTabs;
       }
   }
 };
@@ -140,6 +198,8 @@ export default {
 | positionNav | 页签栏的分布，可选值 top/bottom/left/right | String | top
 | defIndex | 默认选中的页签栏 | String | 1
 | contentShow | 是否显示tab内容 | Boolean | true
+| init-data | 监听数据变化，渲染更新页面 | Array | []
+
 
 
 ### nut-tab-panel

diff --git a/src/packages/tab/tab.vue b/src/packages/tab/tab.vue
@@ -104,7 +104,13 @@ export default {
         'closable':{
             type:Boolean,
             default:false,
-        }
+        },
+        'initData':{
+            type:Array,
+            default:function(){
+                return [];
+            }
+        }     
     },
     data() {
         return {
@@ -118,12 +124,13 @@ export default {
         };
     },
     watch:{
-       positionNav:function(){
+       initData:function(){
             setTimeout(()=>{
                 let slot = [...this.$slots.default];
                 this.tabTitleList = [];
-                this.initTab(slot); 
-            },50);    
+                this.activeIndex = this.defIndex;
+                this.initTab(slot);  
+            },100);    
         }
     },
     computed:{
@@ -172,8 +179,8 @@ export default {
                        this.tabTitleList.push(item);
                        let slotElm = slot[i].elm;
                        if(slotElm){
-                        this.addClass(slotElm,'hide');
-                            if(this.isShowTab * 2 == i) {
+                            this.addClass(slotElm,'hide');
+                            if(this.isShowTab == i) {
                                 this.removeClass(slotElm,'hide')
                             }
                        }