fix(Area): fix initial option error @rex-zsd (#1196)

example/pages/area/index.wxml

@@ -1,5 +1,6 @@
 <demo-block title="基础用法">
   <van-area
+    value="{{ value }}"
     loading="{{ loading }}"
     area-list="{{ areaList }}"
     bind:change="onChange"

packages/area/index.ts

@@ -36,14 +36,14 @@ VantComponent({
   },
 
   watch: {
-    value(value) {
+    value(value: string) {
       this.code = value;
       this.setValues();
     },
 
     areaList: 'setValues',
 
-    columnsNum(value) {
+    columnsNum(value: number) {
       this.set({
         displayColumns: this.data.columns.slice(0, +value)
       });
@@ -58,15 +58,15 @@ VantComponent({
       return this.picker;
     },
 
-    onCancel(event) {
+    onCancel(event: Weapp.Event) {
       this.emit('cancel', event.detail);
     },
 
-    onConfirm(event) {
+    onConfirm(event: Weapp.Event) {
       this.emit('confirm', event.detail);
     },
 
-    emit(type, detail) {
+    emit(type: string, detail) {
       detail.values = detail.value;
       delete detail.value;
       this.$emit(type, detail);
@@ -143,19 +143,28 @@ VantComponent({
         return;
       }
 
-      picker.setColumnValues(0, province);
-      picker.setColumnValues(1, city);
+      const stack = [];
+
+      stack.push(picker.setColumnValues(0, province));
+      stack.push(picker.setColumnValues(1, city));
 
       if (city.length && code.slice(2, 4) === '00') {
         ;[{ code }] = city;
       }
 
-      picker.setColumnValues(2, this.getList('county', code.slice(0, 4)));
-      picker.setIndexes([
-        this.getIndex('province', code),
-        this.getIndex('city', code),
-        this.getIndex('county', code)
-      ]);
+      stack.push(
+        picker.setColumnValues(2, this.getList('county', code.slice(0, 4)))
+      );
+
+      return Promise.all(stack)
+        .then(() =>
+          picker.setIndexes([
+            this.getIndex('province', code),
+            this.getIndex('city', code),
+            this.getIndex('county', code)
+          ])
+        )
+        .catch(() => {});
     },
 
     getValues() {
@@ -177,7 +186,7 @@ VantComponent({
         return area;
       }
 
-      const names = values.map(item => item.name);
+      const names = values.map((item: AreaItem) => item.name);
       area.code = values[values.length - 1].code;
       if (area.code[0] === '9') {
         area.country = names[1] || '';
@@ -193,7 +202,7 @@ VantComponent({
 
     reset() {
       this.code = '';
-      this.setValues();
+      return this.setValues();
     }
   }
 });

packages/datetime-picker/index.ts

@@ -33,7 +33,7 @@ function getTrueValue(formattedValue: string): number {
   return parseInt(formattedValue, 10);
 }
 
-function getMonthEndDay(year, month): number {
+function getMonthEndDay(year: number, month: number): number {
   return 32 - new Date(year, month - 1, 32).getDate();
 }
 
@@ -116,19 +116,11 @@ VantComponent({
   },
 
   methods: {
-    asyncSet(data) {
-      return new Promise(resolve => {
-        this.set(data, resolve);
-      });
-    },
-
     getPicker() {
       if (this.picker == null) {
-        const picker = (this.picker = this.selectComponent(
-          '.van-datetime-picker'
-        ));
+        const picker = this.picker = this.selectComponent('.van-datetime-picker');
         const { setColumnValues } = picker;
-        picker.setColumnValues = (...args) =>
+        picker.setColumnValues = (...args: any) =>
           setColumnValues.apply(picker, [...args, false]);
       }
       return this.picker;
@@ -145,7 +137,7 @@ VantComponent({
         return { values };
       });
 
-      return this.asyncSet({ columns: results });
+      return this.set({ columns: results });
     },
 
     getRanges(): object[] {
@@ -337,11 +329,9 @@ VantComponent({
         }
       }
 
-      return this.asyncSet({ innerValue: value })
+      return this.set({ innerValue: value })
         .then(() => this.updateColumns())
-        .then(() => {
-          picker.setValues(values);
-        });
+        .then(() => picker.setValues(values));
     }
   },
 

packages/mixins/observer/behavior.ts

@@ -1,3 +1,9 @@
+function setAsync(context: Weapp.Component, data: object) {
+  return new Promise(resolve => {
+    context.setData(data, resolve);
+  });
+};
+
 export const behavior = Behavior({
   created() {
     if (!this.$options) {
@@ -28,14 +34,23 @@ export const behavior = Behavior({
 
   methods: {
     // set data and set computed data
-    set(data, callback) {
+    set(data: object, callback: Function) {
+      const stack = [];
+
       if (data) {
-        this.setData(data, callback);
+        stack.push(setAsync(this, data));
       }
 
       if (this.calcComputed) {
-        this.setData(this.calcComputed());
+        stack.push(setAsync(this, this.calcComputed()));
       }
+
+      return Promise.all(stack).then(res => {
+        if (callback && typeof callback === 'function') {
+          callback.call(this);
+        }
+        return res;
+      });
     }
   }
 });

packages/picker-column/index.ts

@@ -32,12 +32,15 @@ VantComponent({
 
   created() {
     const { defaultIndex, initialOptions } = this.data;
-    this.set({
-      currentIndex: defaultIndex,
-      options: initialOptions
-    }, () => {
-      this.setIndex(defaultIndex);
-    });
+    this.set(
+      {
+        currentIndex: defaultIndex,
+        options: initialOptions
+      },
+      () => {
+        this.setIndex(defaultIndex);
+      }
+    );
   },
 
   computed: {
@@ -132,16 +135,14 @@ VantComponent({
     setIndex(index: number, userAction: boolean) {
       const { data } = this;
       index = this.adjustIndex(index) || 0;
-
-      this.set({
-        offset: -index * data.itemHeight
-      });
+      const offset = -index * data.itemHeight;
 
       if (index !== data.currentIndex) {
-        this.set({
-          currentIndex: index
+        return this.set({ offset, currentIndex: index }).then(() => {
+          userAction && this.$emit('change', index);
         });
-        userAction && this.$emit('change', index);
+      } else {
+        return this.set({ offset });
       }
     },
 
@@ -152,6 +153,7 @@ VantComponent({
           return this.setIndex(i);
         }
       }
+      return Promise.resolve();
     },
 
     getValue() {

packages/picker/index.ts

@@ -30,10 +30,10 @@ VantComponent({
       value: [],
       observer(columns = []) {
         this.simple = isSimple(columns);
-        const children = this.children = this.selectAllComponents('.van-picker__column');
+        this.children = this.selectAllComponents('.van-picker__column');
 
-        if (Array.isArray(children) && children.length) {
-          this.setColumns();
+        if (Array.isArray(this.children) && this.children.length) {
+          this.setColumns().catch(() => {});
         }
       }
     }
@@ -49,9 +49,10 @@ VantComponent({
     setColumns() {
       const { data } = this;
       const columns = this.simple ? [{ values: data.columns }] : data.columns;
-      columns.forEach((columns, index: number) => {
-        this.setColumnValues(index, columns.values);
-      });
+      const stack = columns.map((column, index: number) =>
+        this.setColumnValues(index, column.values)
+      );
+      return Promise.all(stack);
     },
 
     emit(event: Weapp.Event) {
@@ -99,7 +100,10 @@ VantComponent({
     // set column value by index
     setColumnValue(index: number, value: any) {
       const column = this.getColumn(index);
-      column && column.setValue(value);
+      if (column) {
+        return column.setValue(value);
+      }
+      return Promise.reject('setColumnValue: 对应列不存在');
     },
 
     // get column option index by column index
@@ -110,7 +114,10 @@ VantComponent({
     // set column option index by column index
     setColumnIndex(columnIndex: number, optionIndex: number) {
       const column = this.getColumn(columnIndex);
-      column && column.setIndex(optionIndex);
+      if (column) {
+        return column.setIndex(optionIndex);
+      }
+      return Promise.reject('setColumnIndex: 对应列不存在');
     },
 
     // get options of column by index
@@ -126,12 +133,14 @@ VantComponent({
         column &&
         JSON.stringify(column.data.options) !== JSON.stringify(options)
       ) {
-        column.set({ options }, () => {
+        return column.set({ options }).then(() => {
           if (needReset) {
             column.setIndex(0);
           }
         });
       }
+
+      return Promise.reject('setColumnValues: 对应列不存在');
     },
 
     // get values of all columns
@@ -141,21 +150,25 @@ VantComponent({
 
     // set values of all columns
     setValues(values: []) {
-      values.forEach((value, index) => {
-        this.setColumnValue(index, value);
-      });
+      const stack = values.map((value, index) =>
+        this.setColumnValue(index, value)
+      );
+      return Promise.all(stack);
     },
 
     // get indexes of all columns
     getIndexes() {
-      return this.children.map((child: Weapp.Component) => child.data.currentIndex);
+      return this.children.map(
+        (child: Weapp.Component) => child.data.currentIndex
+      );
     },
 
     // set indexes of all columns
     setIndexes(indexes: number[]) {
-      indexes.forEach((optionIndex, columnIndex) => {
-        this.setColumnIndex(columnIndex, optionIndex);
-      });
+      const stack = indexes.map((optionIndex, columnIndex) =>
+        this.setColumnIndex(columnIndex, optionIndex)
+      );
+      return Promise.all(stack);
     }
   }
 });