Browse Source

优化tab组件监听数组变化

zhenyulei 5 years ago
parent
commit
0ef20176c4
2 changed files with 11 additions and 6 deletions
  1. 3 1
      src/packages/tab/demo.vue
  2. 8 5
      src/packages/tab/tab.vue

+ 3 - 1
src/packages/tab/demo.vue

@@ -48,7 +48,7 @@
     <h4>禁止选中,默认选中某个标签</h4>
     <h4>禁止选中,默认选中某个标签</h4>
     <h4>如需要更新页面,请将监听变化的数据传入init-data</h4>
     <h4>如需要更新页面,请将监听变化的数据传入init-data</h4>
 
 
-    <nut-tab :defIndex="1" class="customer-css" @tab-switch="tabSwitch" :contentShow="true" :init-data="disableTabs">
+    <nut-tab :defIndex="defIndex" class="customer-css" @tab-switch="tabSwitch" :contentShow="true" :init-data="disableTabs">
       <nut-tab-panel
       <nut-tab-panel
         v-for="value in disableTabs"
         v-for="value in disableTabs"
         v-bind:key="value.tabTitle"
         v-bind:key="value.tabTitle"
@@ -72,6 +72,7 @@ export default {
   },
   },
   data() {
   data() {
     return {
     return {
+      defIndex:1,
       positionNavCurr: "top",
       positionNavCurr: "top",
       editableTabs: [
       editableTabs: [
         {
         {
@@ -131,6 +132,7 @@ export default {
   methods: {
   methods: {
     tabSwitch: function(index, event) {
     tabSwitch: function(index, event) {
       console.log(index + "--" + event.target);
       console.log(index + "--" + event.target);
+      //this.defIndex = index;
     },
     },
     clickHandler:function(){
     clickHandler:function(){
       let newEditableTabs = [
       let newEditableTabs = [

+ 8 - 5
src/packages/tab/tab.vue

@@ -115,7 +115,6 @@ export default {
     data() {
     data() {
         return {
         return {
             tabTitleList:[],
             tabTitleList:[],
-            isShowTab: this.defIndex,
             activeIndex:this.defIndex,
             activeIndex:this.defIndex,
             initIndex:0,
             initIndex:0,
             showTabs:true,
             showTabs:true,
@@ -124,14 +123,18 @@ export default {
         };
         };
     },
     },
     watch:{
     watch:{
-       initData:function(){
+       initData:{
+           handler(){
             setTimeout(()=>{
             setTimeout(()=>{
                 let slot = [...this.$slots.default];
                 let slot = [...this.$slots.default];
                 this.tabTitleList = [];
                 this.tabTitleList = [];
                 this.activeIndex = this.defIndex;
                 this.activeIndex = this.defIndex;
                 this.initTab(slot);  
                 this.initTab(slot);  
-            },100);    
-        }
+            },100);  
+           },
+           immediate:true,
+           deep:true
+       }
     },
     },
     computed:{
     computed:{
         tabType:function(){
         tabType:function(){
@@ -180,7 +183,7 @@ export default {
                        let slotElm = slot[i].elm;
                        let slotElm = slot[i].elm;
                        if(slotElm){
                        if(slotElm){
                             this.addClass(slotElm,'hide');
                             this.addClass(slotElm,'hide');
-                            if(this.isShowTab == i) {
+                            if(this.activeIndex == i) {
                                 this.removeClass(slotElm,'hide')
                                 this.removeClass(slotElm,'hide')
                             }
                             }
                        }                
                        }