select优化异步重复加载问题

src/demo/select.vue

@@ -156,9 +156,13 @@ export default {
         this.demo3.selected = arr.join('-');
       },
       slideEnd(val, $select) {
-        console.log(val);
-        if(val.length<3) {
-          $select.updateSelect([{"n": parseInt(Math.random()*10)},{"n": parseInt(Math.random()*10)}]);          
+        $select.showSelectMask('我可以自定义，为了让你看到我延迟2s消失');
+        if(val.length < 3) {
+            $select.updateSelect([{"n": parseInt(Math.random()*10)},{"n": parseInt(Math.random()*10)}]);           
+        }else {
+          setTimeout(function() {
+            $select.hideSelectMask();
+          },2000)
         }
       }
     }

src/package/select/src/dateSwiper.vue

@@ -9,6 +9,7 @@
                     </div>
                     <div class="selected-bg"></div>
                     <div class="date-swiper-con">
+                        <div v-if='selectShow' class="select-mask">{{txt}}</div>
                         <template v-for="(d, idx) in swiperData">
                             <nut-swiper :date-swiper-index= 'idx' :ref='"dw"+idx'
                             direction="vertical"
@@ -32,6 +33,8 @@
         name: 'nut-date-swiper',
         data() {
             return {
+                selectShow: false,
+                txt: '',
                 maskShow: true,
                 data: [],
                 callbackParam: [],
@@ -39,6 +42,12 @@
                 selectIndexs: [],
             }
         },
+
+        mounted: function() {
+            this.loading = this.$loading({
+                fade: true
+            })
+        },
         computed: {
             swiperData() {
                 return this.data;
@@ -55,6 +64,7 @@
                         }
                     }
                 }
+                
             }
         },
         methods: {
@@ -101,12 +111,23 @@
         .date-swiper-con {
             display: flex;
         }
+        .select-mask {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            z-index: 100;
+            text-align: center;
+            color: #fff;
+            line-height: 3.56rem;
+            background: rgba(0,0,0,.5);
+        }
         .date-swiper {
             color: #dedede!important;
             font-size: 0.28rem!important;
             width: 100%;
             height: 2.5rem!important;
             padding-top: 1.40rem!important;
+            transition: .5s all;
         }
         .nut-swiper-silde-selected {
             color: #333!important;

src/package/select/src/select.vue

@@ -34,10 +34,14 @@
         },
         data() {
             return {
-                swiperCacheData: []
+                swiperCacheData: [],
+                dateSwiper: {}
             }
         },
         mounted: function() {
+            this.loading = this.$loading({
+                fade: true
+            })
         },
         computed: {
             cacheSelected() {
@@ -47,8 +51,8 @@
         methods: {
             initSwiper(selector) {
                 this.swiperCacheData = [];
-                this.swiperData(this.data, 0, true);
                 this.dateSwiper = new Vue(dateSwiper).$mount(`#${selector}>div`);
+                this.swiperData(this.data, 0, true);
                 this.dateSwiper.data = this.swiperCacheData;
                 this.dateSwiper.nodeKey = this.nodeKey;
                 this.dateSwiper.$on('change', this.change);
@@ -128,6 +132,7 @@
                         this.swiperData(children, obj.hie+1, false);
                     }
                 }
+                this.showSelectMask();
                 this.$emit('slideEnd', this.getSelectedIndexs(), this);
             },            
             getSelectedIndexs() {
@@ -147,6 +152,13 @@
                 }else {
                     console.warn("【select】组件---调用【updateSelect】时，数据有问题");
                 }
+            },
+            showSelectMask(txt) {
+                this.dateSwiper.selectShow = true;
+                this.dateSwiper.txt = txt || '数据加载中...';
+            },
+            hideSelectMask() {
+                this.dateSwiper.selectShow = false;
             }
         }
     }

src/view/select.vue

@@ -103,7 +103,7 @@
           <tbody>
             <tr>
               <td>slideEnd</td>
-              <td>当异步开启时，每当滑动结束时触发</td>
+              <td>当异步开启时，每当滑动结束时触发，切记注意判断的时间，否则会造成死循环。</td>
               <td>[数据数据],数据索引对应列（用于更新数据）</td>
             </tr>
             <tr>
@@ -131,6 +131,16 @@
               <td>当异步开启时，动态添加第二列时调用</td>
               <td>符合列表数据结构（nodeKey与childKey）</td>
             </tr>
+            <tr>
+              <td>showSelectMask</td>
+              <td>显示蒙层，主要用于异步操作时，防止多次请求</td>
+              <td>蒙曾显示文字，默认：数据加载中...</td>
+            </tr>
+            <tr>
+              <td>hideSelectMask</td>
+              <td>隐藏蒙层，异步时更新数据完成之后，去掉蒙层使用</td>
+              <td>无</td>
+            </tr>
           </tbody>
         </table>
         </div>