[new feature] Picker: add loading prop (#619)

packages/area/index.vue

@@ -5,6 +5,7 @@
     show-toolbar
     value-key="name"
     :title="title"
+    :loading="loading"
     :columns="columns"
     :item-height="itemHeight"
     :visible-item-count="visibleItemCount"
@@ -28,6 +29,7 @@ export default create({
   props: {
     value: {},
     title: String,
+    loading: Boolean,
     areaList: Object,
     itemHeight: Number,
     visibleItemCount: Number,

packages/picker/PickerColumn.vue

@@ -37,14 +37,11 @@ export default create({
     valueKey: String,
     className: String,
     itemHeight: Number,
+    visibleItemCount: Number,
     options: {
       type: Array,
       default: () => []
     },
-    visibleItemCount: {
-      type: Number,
-      default: 5
-    },
     defaultIndex: {
       type: Number,
       default: 0

packages/picker/index.vue

@@ -7,7 +7,10 @@
         <div class="van-picker__confirm" @click="emit('confirm')">{{ confirmButtonText || $t('confirm') }}</div>
       </slot>
     </div>
-    <div class="van-picker__columns" @touchmove.prevent>
+    <div v-if="loading" class="van-picker__loading">
+      <loading type="circular" />
+    </div>
+    <div class="van-picker__columns" :style="columnsStyle" @touchmove.prevent>
       <picker-column
         v-for="(item, index) in currentColumns"
         :key="index"
@@ -38,10 +41,14 @@ export default create({
 
   props: {
     title: String,
+    loading: Boolean,
     showToolbar: Boolean,
     confirmButtonText: String,
     cancelButtonText: String,
-    visibleItemCount: Number,
+    visibleItemCount: {
+      type: Number,
+      default: 5
+    },
     valueKey: {
       type: String,
       default: 'text'
@@ -78,6 +85,12 @@ export default create({
       return {
         height: this.itemHeight + 'px'
       };
+    },
+
+    columnsStyle() {
+      return {
+        height: this.itemHeight * this.visibleItemCount + 'px'
+      };
     }
   },
 

packages/vant-css/src/loading.css

@@ -84,7 +84,7 @@
       color: $gray;
     }
 
-    .van-loading__circular circle {
+    circle {
       stroke: $gray;
     }
   }
@@ -103,7 +103,7 @@
       color: #fff;
     }
 
-    .van-loading__circular circle {
+    circle {
       stroke: $white;
     }
   }

packages/vant-css/src/picker.css

@@ -3,6 +3,7 @@
 .van-picker {
   overflow: hidden;
   user-select: none;
+  position: relative;
   background-color: $white;
 
   &__toolbar {
@@ -31,7 +32,22 @@
     display: flex;
     position: relative;
   }
-  
+
+  &__loading {
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 2;
+    position: absolute;
+    background-color: rgba(255,255,255,.9);
+
+    circle {
+      stroke: $blue;
+    }
+  }
+
+  &__loading .van-loading,
   &__frame {
     top: 50%;
     left: 0;