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

docs/demos/views/picker.vue

@@ -21,6 +21,10 @@
     <demo-block :title="$t('title4')">
       <van-picker :columns="columns" @change="onChange2" />
     </demo-block>
+
+    <demo-block :title="$t('loading')">
+      <van-picker :columns="columns" loading />
+    </demo-block>
   </demo-section>
 </template>
 

docs/markdown/en-US/area.md

@@ -45,6 +45,7 @@ Set `columns-num` with 2, you'll have a 2 level picker.
 | area-list | an object contains these properties: `province_list`, `city_list` and `county_list`  | `Object` | - | - |
 | columns-num | level of picker | `String`,`Number` | 3 | - |
 | item-height | Option height | `Number` | `44` | - |
+| loading | Whether to show loading prompt | `Boolean` | `false` | - |
 | visible-item-count | Count of visible columns | `Number` | `5` | - |
 
 ### Event

docs/markdown/en-US/picker.md

@@ -114,6 +114,13 @@ export default {
 };
 ```
 
+#### Loading
+When Picker columns data is acquired asynchronously, use `loading` prop to show loading prompt
+
+```html
+<van-picker :columns="columns" loading />
+```
+
 ### API
 
 | Attribute | Description | Type | Default | Accepted Values |
@@ -121,6 +128,7 @@ export default {
 | columns | Columns data | `Array` | `[]` | - |
 | show-toolbar | Whether to show toolbar | `Boolean` | `false` | - |
 | title | Toolbar title | `String` | `''` | - |
+| loading | Whether to show loading prompt | `Boolean` | `false` | - |
 | confirm-button-text | Text of confirm button | `String` | `Confirm` | - |
 | cancel-button-text | Text of cancel button | `String` | `Cancel` | - |
 | item-height | Option height | `Number` | `44` | - |

docs/markdown/zh-CN/area.md

@@ -42,6 +42,7 @@ Vue.use(Area);
 | title | 顶部栏标题 | `String` | `''`   | - |
 | area-list | 省市县数据，格式见下方 | `Object` | - | - |
 | columns-num | 省市县显示列数，3-省市县，2-省市，1-省 | `String`,`Number` | `3` | - |
+| loading | 是否显示加载状态 | `Boolean` | `false` | - |
 | item-height | 选项高度 | `Number` | `44` | - |
 | visible-item-count | 可见的选项个数 | `Number` | `5` | - |
 

docs/markdown/zh-CN/picker.md

@@ -116,6 +116,13 @@ export default {
 };
 ```
 
+#### 加载状态
+当 Picker 数据是通过异步获取时，可以通过 `loading` 属性显示加载提示
+
+```html
+<van-picker :columns="columns" loading />
+```
+
 ### API
 
 | 参数 | 说明 | 类型 | 默认值 | 可选值 |
@@ -123,6 +130,7 @@ export default {
 | columns | 对象数组，配置每一列显示的数据 | `Array` | `[]` | - |
 | show-toolbar | 是否显示顶部栏 | `Boolean` | `false` | - |
 | title | 顶部栏标题 | `String` | `''` | - |
+| loading | 是否显示加载状态 | `Boolean` | `false` | - |
 | confirm-button-text | 确认按钮文字 | `String` | `完成` | - |
 | cancel-button-text | 取消按钮文字 | `String` | `取消` | - |
 | item-height | 选项高度 | `Number` | `44` | - |

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 {
@@ -32,6 +33,21 @@
     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;