解决 yd-tab 组件不能动态添加问题

JackEasons · Oct 23, 2017 · ec54027 · ec54027
1 parent 346a125
commit ec54027
Show file tree

Hide file tree

Showing 14 changed files with 51 additions and 39 deletions.
diff --git a/example/routers/popup.vue b/example/routers/popup.vue
@@ -8,7 +8,7 @@
             <yd-button size="large" type="danger" @click.native="show4 = true">右侧弹出</yd-button>
         </yd-button-group>
 
-        <yd-popup v-model="show1" position="center" width="90%" :close-on-click-modal="closeOnClickModal">
+        <yd-popup v-model="show1" position="center" width="90%">
             <p>
                 我为什么喜欢在京东买东西，因为今天买明天就可以送到。我为什么每个商品的评价都一样，因为在京东买的东西太多太多了，
                 导致积累了很多未评价的订单，所以我统一用段话作为评价内容。京东购物这么久，有买到很好的产品，也有买到比较坑的产品，
@@ -50,8 +50,7 @@
                 show1: false,
                 show2: false,
                 show3: false,
-                show4: false,
-                closeOnClickModal:false
+                show4: false
             }
         }
     }

diff --git a/src/components/actionsheet/src/actionsheet.vue b/src/components/actionsheet/src/actionsheet.vue
@@ -2,7 +2,7 @@
     <div>
         <div class="yd-actionsheet-mask" v-show="show" @click.stop="close"></div>
         <div class="yd-actionsheet" :class="show ? 'yd-actionsheet-active' : ''">
-            <a v-for="item in items" @click.stop="itemClick(item)" href="javascript:;" class="yd-actionsheet-item" >{{item.label}}</a>
+            <a v-for="item, key in items" @click.stop="itemClick(item)" href="javascript:;" class="yd-actionsheet-item" :key="key">{{item.label}}</a>
             <a v-if="cancel" @click.stop="close" href="javascript:;" class="yd-actionsheet-action">{{cancel}}</a>
         </div>
     </div>

diff --git a/src/components/cityselect/src/cityselect.vue b/src/components/cityselect/src/cityselect.vue
@@ -6,7 +6,8 @@
                 <p class="yd-cityselect-title" @touchstart.stop.prevent="">{{title}}</p>
                 <div v-show="ready" class="yd-cityselect-nav">
                     <a href="javascript:;"
-                       v-for="index in columnNum"
+                       :key="key"
+                       v-for="index, key in columnNum"
                        v-show="!!nav['txt' + index]"
                        @click.stop="navEvent(index)"
                        :class="index == navIndex ? 'yd-cityselect-nav-active' : ''"
@@ -21,11 +22,12 @@
                 </svg>
             </div>
             <ul v-show="ready" class="yd-cityselect-content" :class="activeClasses">
-                <li class="yd-cityselect-item" v-for="index in columnNum" :ref="'itemBox' + index">
+                <li class="yd-cityselect-item" v-for="index, key in columnNum" :ref="'itemBox' + index" :key="key">
                     <template v-if="columns['columnItems' + index].length > 0">
                         <div class="yd-cityselect-item-box">
                             <a href="javascript:;"
-                               v-for="item in columns['columnItems' + index]"
+                               :key="key"
+                               v-for="item, key in columns['columnItems' + index]"
                                :class="currentClass(item.v, item.n, index)"
                                @click.stop="itemEvent(index, item.n, item.v, item.c)"
                             ><span>{{item.n}}</span></a>

diff --git a/src/components/datetime/src/picker.vue b/src/components/datetime/src/picker.vue
@@ -7,10 +7,10 @@
                 <a href="javascript:;" @click.stop="setValue">{{confirmText}}</a>
             </div>
             <div class="yd-datetime-content">
-                <div class="yd-datetime-item" v-for="column in columns">
+                <div class="yd-datetime-item" v-for="column, key in columns" :key="key">
                     <div class="yd-datetime-item-box" :ref="'Component_' + column">
                         <div class="yd-datetime-item-content" :ref="'Content_' + column">
-                            <span v-for="item in items[column]" :data-value="item.value" v-html="item.name"></span>
+                            <span v-for="item, key in items[column]" :data-value="item.value" v-html="item.name" :key="key"></span>
                         </div>
                     </div>
                 </div>

diff --git a/src/components/dialog/src/confirm/confirm.vue b/src/components/dialog/src/confirm/confirm.vue
@@ -11,8 +11,10 @@
             </template>
             <template v-else>
                 <div class="yd-confirm-ft">
-                    <a href="javascript:;" class="yd-confirm-btn"
-                       v-for="item in opts"
+                    <a href="javascript:;"
+                       class="yd-confirm-btn"
+                       :key="key"
+                       v-for="item, key in opts"
                        :class="typeof item.color == 'boolean' ? (item.color ? 'primary' : 'default') : ''"
                        :style="{color: item.color}"
                        @click.stop="closeConfirm(item.stay, item.callback)"

diff --git a/src/components/keyboard/src/keyboard.vue b/src/components/keyboard/src/keyboard.vue
@@ -8,23 +8,23 @@
             </div>
             <div class="yd-keyboard-error">{{error}}</div>
             <ul class="yd-keyboard-password">
-                <li v-for="n in 6"><i v-show="nums.length >= n"></i></li>
+                <li v-for="n, k in 6" :key="k"><i v-show="nums.length >= n"></i></li>
             </ul>
             <div class="yd-keyboard-content">
                 <div class="yd-keyboard-title">{{title}}</div>
                 <ul class="yd-keyboard-numbers">
-                    <li v-for="i in 4">
+                    <li v-for="i, k in 4" :key="k">
                         <template v-if="triggerClose">
                             <a href="javascript:;" v-if="i == 4" @click.stop="close">{{cancelText}}</a>
                         </template>
                         <template v-else>
                             <a href="javascript:;" v-if="i == 4"></a>
                         </template>
                         <template v-if="isMobile">
-                            <a href="javascript:;" v-for="n in numsArr.slice((i - 1) * 3, i * 3)" @touchstart.stop="numclick(n)">{{n}}</a>
+                            <a href="javascript:;" v-for="n, k in numsArr.slice((i - 1) * 3, i * 3)" @touchstart.stop="numclick(n)" :key="k">{{n}}</a>
                         </template>
                         <template v-else>
-                            <a href="javascript:;" v-for="n in numsArr.slice((i - 1) * 3, i * 3)" @click.stop="numclick(n)">{{n}}</a>
+                            <a href="javascript:;" v-for="n, k in numsArr.slice((i - 1) * 3, i * 3)" @click.stop="numclick(n)" :key="k">{{n}}</a>
                         </template>
                         <a href="javascript:;" v-if="i == 4" @click.stop="backspace"></a>
                     </li>

diff --git a/src/components/lightbox/src/box.vue b/src/components/lightbox/src/box.vue
@@ -7,7 +7,7 @@
             </div>
             <div class="yd-lightbox-img" @click="show = !show">
                 <slider autoplay="0" :show-pagination="false" :loop="false" :callback="changeIndex" :index="index">
-                    <slider-item v-for="item in imgItems">
+                    <slider-item v-for="item, key in imgItems" :key="key">
                         <img :src="getImgSrc(item.$el)">
                     </slider-item>
                 </slider>

diff --git a/src/components/popup/src/popup.vue b/src/components/popup/src/popup.vue
@@ -45,9 +45,9 @@
             value: {
                 type: Boolean
             },
-            closeOnClickModal: {
+            closeOnMasker: {
                 type: Boolean,
-                default:true
+                default: true
             }
         },
         watch: {
@@ -103,7 +103,7 @@
             close() {
                 isIOS && removeClass(this.scrollView, 'g-fix-ios-overflow-scrolling-bug');
 
-                if (this.closeOnClickModal){
+                if (this.closeOnMasker) {
                     this.show = false;
                     this.$emit('input', false);
                 }
@@ -113,6 +113,8 @@
             this.scrollView = getScrollview(this.$el);
         },
         destroyed() {
+            isIOS && removeClass(this.scrollView, 'g-fix-ios-overflow-scrolling-bug');
+
             pageScroll.unlock();
         }
     }

diff --git a/src/components/rate/src/rate.vue b/src/components/rate/src/rate.vue
@@ -1,6 +1,8 @@
 <template>
     <span class="yd-rate" :style="{fontSize: size, color: color}">
-        <a href="javascript:;" v-for="item in ~~count"
+        <a href="javascript:;"
+           v-for="item, key in ~~count"
+           :key="key"
            :class="index >= item ? 'rate-active' : ''"
            :style="{color: index >= item ? activeColor : color, paddingRight: padding}"
            @click="!readonly && choose(item)"

diff --git a/src/components/scrolltab/src/scrolltab.vue b/src/components/scrolltab/src/scrolltab.vue
@@ -1,8 +1,10 @@
 <template>
     <div class="yd-scrolltab">
         <div class="yd-scrolltab-nav">
-            <a href="javascript:;" class="yd-scrolltab-item"
-               v-for="item in navList"
+            <a href="javascript:;"
+               class="yd-scrolltab-item"
+               v-for="item, key in navList"
+               :key="key"
                :class="activeIndex == item._uid ? 'yd-scrolltab-active' : ''"
                @click="moveHandler(item._uid)">
                 <div class="yd-scrolltab-icon"><i :class="item.icon"></i></div>

diff --git a/src/components/search/src/search.vue b/src/components/search/src/search.vue
@@ -33,7 +33,7 @@
                     <a href="javascript:;" class="cancel-text" @click="close">{{cancelText}}</a>
                 </div>
                 <div class="yd-search-list" :style="{paddingBottom: top}">
-                    <p class="yd-search-list-item" v-for="item in result" @click="clickHandler(item)">{{item}}</p>
+                    <p class="yd-search-list-item" v-for="item, key in result" @click="clickHandler(item)" :key="key">{{item}}</p>
                 </div>
             </div>
         </template>

diff --git a/src/components/slider/src/slider.vue b/src/components/slider/src/slider.vue
@@ -11,7 +11,7 @@
         <div class="yd-slider-pagination" v-if="itemsArr.length > 1 && showPagination"
              :class="direction == 'vertical' ? 'yd-slider-pagination-vertical' : ''">
             <span class="yd-slider-pagination-item"
-                  v-for="(t, i) in itemNums" :key="i"
+                  v-for="t, i in itemNums" :key="i"
                   :class="paginationIndex == i ? 'yd-slider-pagination-item-active': ''"
             ></span>
         </div>

diff --git a/src/components/tab/src/tab-panel.vue b/src/components/tab/src/tab-panel.vue
@@ -22,8 +22,13 @@
                 this.$parent.init(true);
             },
             label() {
-                this.$parent.init('label')
+                this.$parent.init(false, 'label');
             }
+        },
+        mounted() {
+            this.$nextTick(() => {
+                this.$parent.init(false);
+            });
         }
     }
 </script>
diff --git a/src/components/tab/src/tab.vue b/src/components/tab/src/tab.vue
@@ -1,8 +1,9 @@
 <template>
     <div class="yd-tab">
-        <ul class="yd-tab-nav" :style="{color: activeColor}">
+        <ul class="yd-tab-nav" :style="{color: activeColor}" v-show="navList.length > 0">
             <li class="yd-tab-nav-item"
-                v-for="item in navList"
+                v-for="item, key in navList"
+                :key="key"
                 :class="item._uid == activeIndex ? 'yd-tab-active' : ''"
                 @click="changeHandler(item._uid, item.label, item.tabkey)">
                 <a href="javascript:;">{{item.label}}</a>
@@ -31,29 +32,29 @@
             callback: Function,
             activeColor: {
                 validator(value) {
-                    if(!value) return true;
+                    if (!value) return true;
                     return isColor(value);
                 },
                 default: '#FF5E53'
             }
         },
         methods: {
-            init(update) {
+            init(update, status) {
                 const tabPanels = this.$children.filter(item => item.$options.name === 'yd-tab-panel');
 
                 let num = 0;
 
+                if (!update) {
+                    this.navList = [];
+                }
+
                 tabPanels.forEach((panel, index) => {
-                    if(update === 'label') {
-                      return this.navList[index] = panel;
+                    if (status === 'label') {
+                        return this.navList[index] = panel;
                     }
 
                     if (!update) {
-                        this.navList.push({
-                            label: panel.label,
-                            _uid: panel._uid,
-                            tabkey: panel.tabkey
-                        });
+                        this.navList.push({_uid: panel._uid, label: panel.label, tabkey: panel.tabkey});
                     }
 
                     if (panel.active) {
@@ -79,9 +80,6 @@
                     this.emitChange(label, tabkey);
                 }
             }
-        },
-        mounted() {
-            this.init(false);
         }
     }
 </script>