build: compile 1.0.3

dist/area/index.js

@@ -3,12 +3,24 @@ import { pickerProps } from '../picker/shared';
 const COLUMNSPLACEHOLDERCODE = '000000';
 VantComponent({
     classes: ['active-class', 'toolbar-class', 'column-class'],
-    props: Object.assign(Object.assign({}, pickerProps), { value: String, areaList: {
+    props: Object.assign(Object.assign({}, pickerProps), { value: {
+            type: String,
+            observer(value) {
+                this.code = value;
+                this.setValues();
+            },
+        }, areaList: {
             type: Object,
-            value: {}
+            value: {},
+            observer: 'setValues'
         }, columnsNum: {
             type: null,
-            value: 3
+            value: 3,
+            observer(value) {
+                this.setData({
+                    displayColumns: this.data.columns.slice(0, +value)
+                });
+            }
         }, columnsPlaceholder: {
             type: Array,
             observer(val) {
@@ -26,18 +38,6 @@ VantComponent({
         displayColumns: [{ values: [] }, { values: [] }, { values: [] }],
         typeToColumnsPlaceholder: {}
     },
-    watch: {
-        value(value) {
-            this.code = value;
-            this.setValues();
-        },
-        areaList: 'setValues',
-        columnsNum(value) {
-            this.setData({
-                displayColumns: this.data.columns.slice(0, +value)
-            });
-        }
-    },
     mounted() {
         setTimeout(() => {
             this.setValues();

dist/common/component.js

@@ -1,5 +1,4 @@
 import { basic } from '../mixins/basic';
-import { observe } from '../mixins/observer/index';
 function mapKeys(source, target, map) {
     Object.keys(map).forEach(key => {
         if (source[key]) {
@@ -42,7 +41,6 @@ function VantComponent(vantOptions = {}) {
         multipleSlots: true,
         addGlobalClass: true
     };
-    observe(vantOptions, options);
     Component(options);
 }
 export { VantComponent };

dist/datetime-picker/index.js

@@ -33,9 +33,13 @@ function getMonthEndDay(year, month) {
 const defaultFormatter = (_, value) => value;
 VantComponent({
     classes: ['active-class', 'toolbar-class', 'column-class'],
-    props: Object.assign(Object.assign({}, pickerProps), { value: null, filter: null, type: {
+    props: Object.assign(Object.assign({}, pickerProps), { value: {
+            type: null,
+            observer: 'updateValue'
+        }, filter: null, type: {
             type: String,
-            value: 'datetime'
+            value: 'datetime',
+            observer: 'updateValue'
         }, showToolbar: {
             type: Boolean,
             value: true
@@ -44,37 +48,33 @@ VantComponent({
             value: defaultFormatter
         }, minDate: {
             type: Number,
-            value: new Date(currentYear - 10, 0, 1).getTime()
+            value: new Date(currentYear - 10, 0, 1).getTime(),
+            observer: 'updateValue'
         }, maxDate: {
             type: Number,
-            value: new Date(currentYear + 10, 11, 31).getTime()
+            value: new Date(currentYear + 10, 11, 31).getTime(),
+            observer: 'updateValue'
         }, minHour: {
             type: Number,
-            value: 0
+            value: 0,
+            observer: 'updateValue'
         }, maxHour: {
             type: Number,
-            value: 23
+            value: 23,
+            observer: 'updateValue'
         }, minMinute: {
             type: Number,
-            value: 0
+            value: 0,
+            observer: 'updateValue'
         }, maxMinute: {
             type: Number,
-            value: 59
+            value: 59,
+            observer: 'updateValue'
         } }),
     data: {
         innerValue: Date.now(),
         columns: []
     },
-    watch: {
-        value: 'updateValue',
-        type: 'updateValue',
-        minDate: 'updateValue',
-        maxDate: 'updateValue',
-        minHour: 'updateValue',
-        maxHour: 'updateValue',
-        minMinute: 'updateValue',
-        maxMinute: 'updateValue'
-    },
     methods: {
         updateValue() {
             const { data } = this;

dist/definitions/index.d.ts

@@ -12,7 +12,6 @@ export interface VantComponentOptions<Data, Props, Methods, Instance> {
     classes?: string[];
     mixins?: string[];
     props?: Props & Weapp.PropertyOption;
-    watch?: Weapp.WatchOption<Instance>;
     relation?: Weapp.RelationOption<Instance> & {
         name: string;
     };

dist/definitions/weapp.d.ts

@@ -80,12 +80,6 @@ export declare namespace Weapp {
      * obverser定义，miniprogram-api-typings缺少this定义
      */
     type Observer<Instance, T> = (this: Instance, newVal: T, oldVal: T, changedPath: Array<string | number>) => void;
-    /**
-     * watch定义
-     */
-    export interface WatchOption<Instance> {
-        [name: string]: string | Observer<Instance, any>;
-    }
     /**
      * methods定义，miniprogram-api-typings缺少this定义
      */

dist/dialog/index.js

@@ -5,7 +5,12 @@ import { GRAY, BLUE } from '../common/color';
 VantComponent({
     mixins: [button, openType],
     props: {
-        show: Boolean,
+        show: {
+            type: Boolean,
+            observer(show) {
+                !show && this.stopLoading();
+            }
+        },
         title: String,
         message: String,
         useSlot: Boolean,
@@ -58,11 +63,6 @@ VantComponent({
             cancel: false
         }
     },
-    watch: {
-        show(show) {
-            !show && this.stopLoading();
-        }
-    },
     methods: {
         onConfirm() {
             this.handleAction('confirm');

dist/image/index.js

@@ -12,7 +12,15 @@ VantComponent({
     mixins: [button, openType],
     classes: ['custom-class', 'loading-class', 'error-class', 'image-class'],
     props: {
-        src: String,
+        src: {
+            type: String,
+            observer() {
+                this.setData({
+                    error: false,
+                    loading: true
+                });
+            }
+        },
         round: Boolean,
         width: {
             type: null,
@@ -45,14 +53,6 @@ VantComponent({
         error: false,
         loading: true
     },
-    watch: {
-        src() {
-            this.setData({
-                error: false,
-                loading: true
-            });
-        }
-    },
     mounted() {
         this.setMode();
         this.setStyle();

dist/mixins/basic.js

@@ -3,6 +3,10 @@ export const basic = Behavior({
         $emit(...args) {
             this.triggerEvent(...args);
         },
+        set(data, callback) {
+            this.setData(data, callback);
+            return new Promise(resolve => wx.nextTick(resolve));
+        },
         getRect(selector, all) {
             return new Promise(resolve => {
                 wx.createSelectorQuery()

dist/mixins/observer/behavior.d.ts

@@ -1 +0,0 @@
-export declare const behavior: string;

dist/mixins/observer/behavior.js

@@ -1,8 +0,0 @@
-export const behavior = Behavior({
-    methods: {
-        set(data, callback) {
-            this.setData(data, callback);
-            return new Promise(resolve => wx.nextTick(resolve));
-        }
-    }
-});

dist/mixins/observer/index.d.ts

@@ -1 +0,0 @@
-export declare function observe(vantOptions: any, options: any): void;

dist/mixins/observer/index.js

@@ -1,19 +0,0 @@
-import { behavior } from './behavior';
-export function observe(vantOptions, options) {
-    const { watch } = vantOptions;
-    options.behaviors.push(behavior);
-    if (watch) {
-        const props = options.properties || {};
-        Object.keys(watch).forEach(key => {
-            if (key in props) {
-                let prop = props[key];
-                if (prop === null || !('type' in prop)) {
-                    prop = { type: prop };
-                }
-                prop.observer = watch[key];
-                props[key] = prop;
-            }
-        });
-        options.properties = props;
-    }
-}

dist/nav-bar/index.wxss

@@ -1 +1 @@
-@import '../common/index.wxss';.van-nav-bar{position:relative;text-align:center;-webkit-user-select:none;user-select:none;height:44px;height:var(--nav-bar-height,44px);line-height:44px;line-height:var(--nav-bar-height,44px);background-color:#fff;background-color:var(--nav-bar-background-color,#fff)}.van-nav-bar__text{display:inline-block;vertical-align:middle;margin:0 -16px;margin:0 -var(--padding-md,16px);padding:0 16px;padding:0 var(--padding-md,16px);color:#1989fa;color:var(--nav-bar-text-color,#1989fa)}.van-nav-bar__text--hover{background-color:#f2f3f5;background-color:var(--active-color,#f2f3f5)}.van-nav-bar__arrow{vertical-align:middle;font-size:16px;font-size:var(--nav-bar-arrow-size,16px);color:#1989fa;color:var(--nav-bar-text-color,#1989fa)}.van-nav-bar__arrow+.van-nav-bar__text{margin-left:-20px;padding-left:25px}.van-nav-bar--fixed{position:fixed;top:0;left:0;width:100%}.van-nav-bar__title{max-width:60%;margin:0 auto;color:#323233;color:var(--nav-bar-title-text-color,#323233);font-weight:500;font-weight:var(--font-weight-bold,500);font-size:16px;font-size:var(--nav-bar-title-font-size,16px)}.van-nav-bar__left,.van-nav-bar__right{position:absolute;bottom:0;font-size:14px;font-size:var(--font-size-md,14px)}.van-nav-bar__left{left:16px;left:var(--padding-md,16px)}.van-nav-bar__right{right:16px;right:var(--padding-md,16px)}
+@import '../common/index.wxss';.van-nav-bar{position:relative;text-align:center;-webkit-user-select:none;user-select:none;height:44px;height:var(--nav-bar-height,44px);line-height:44px;line-height:var(--nav-bar-height,44px);background-color:#fff;background-color:var(--nav-bar-background-color,#fff)}.van-nav-bar__text{display:inline-block;vertical-align:middle;margin:0 -16px;margin:0 -var(--padding-md,16px);padding:0 16px;padding:0 var(--padding-md,16px);color:#1989fa;color:var(--nav-bar-text-color,#1989fa)}.van-nav-bar__text--hover{background-color:#f2f3f5;background-color:var(--active-color,#f2f3f5)}.van-nav-bar__arrow{vertical-align:middle;font-size:16px;font-size:var(--nav-bar-arrow-size,16px);color:#1989fa;color:var(--nav-bar-text-color,#1989fa)}.van-nav-bar__arrow+.van-nav-bar__text{margin-left:-20px;padding-left:25px}.van-nav-bar--fixed{position:fixed;top:0;left:0;width:100%}.van-nav-bar__title{max-width:60%;margin:0 auto;color:#323233;color:var(--nav-bar-title-text-color,#323233);font-weight:500;font-weight:var(--font-weight-bold,500);font-size:16px;font-size:var(--nav-bar-title-font-size,16px)}.van-nav-bar__left,.van-nav-bar__right{position:absolute;bottom:0;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;font-size:14px;font-size:var(--font-size-md,14px)}.van-nav-bar__left{left:16px;left:var(--padding-md,16px)}.van-nav-bar__right{right:16px;right:var(--padding-md,16px)}

dist/notice-bar/index.js

@@ -5,7 +5,12 @@ VantComponent({
     props: {
         text: {
             type: String,
-            value: ''
+            value: '',
+            observer() {
+                wx.nextTick(() => {
+                    this.init();
+                });
+            },
         },
         mode: {
             type: String,
@@ -25,7 +30,12 @@ VantComponent({
         },
         speed: {
             type: Number,
-            value: 50
+            value: 50,
+            observer() {
+                wx.nextTick(() => {
+                    this.init();
+                });
+            }
         },
         scrollable: {
             type: Boolean,
@@ -48,14 +58,6 @@ VantComponent({
     data: {
         show: true
     },
-    watch: {
-        text() {
-            this.setData({}, this.init);
-        },
-        speed() {
-            this.setData({}, this.init);
-        }
-    },
     created() {
         this.resetAnimation = wx.createAnimation({
             duration: 0,

dist/picker-column/index.js

@@ -14,7 +14,10 @@ VantComponent({
         },
         defaultIndex: {
             type: Number,
-            value: 0
+            value: 0,
+            observer(value) {
+                this.setIndex(value);
+            }
         }
     },
     data: {
@@ -34,11 +37,6 @@ VantComponent({
             this.setIndex(defaultIndex);
         });
     },
-    watch: {
-        defaultIndex(value) {
-            this.setIndex(value);
-        }
-    },
     methods: {
         getCount() {
             return this.data.options.length;

dist/row/index.js

@@ -10,10 +10,10 @@ VantComponent({
         }
     },
     props: {
-        gutter: Number
-    },
-    watch: {
-        gutter: 'setGutter'
+        gutter: {
+            type: Number,
+            observer: 'setGutter'
+        }
     },
     mounted() {
         if (this.data.gutter) {

dist/slider/index.js

@@ -22,18 +22,16 @@ VantComponent({
         },
         value: {
             type: Number,
-            value: 0
+            value: 0,
+            observer(value) {
+                this.updateValue(value, false);
+            }
         },
         barHeight: {
             type: null,
             value: '2px'
         }
     },
-    watch: {
-        value(value) {
-            this.updateValue(value, false);
-        }
-    },
     created() {
         this.updateValue(this.data.value);
     },

dist/stepper/index.js

@@ -11,11 +11,37 @@ VantComponent({
     field: true,
     classes: ['input-class', 'plus-class', 'minus-class'],
     props: {
-        value: null,
+        value: {
+            type: null,
+            observer(value) {
+                if (value === '') {
+                    return;
+                }
+                const newValue = this.range(value);
+                if (typeof newValue === 'number' && +this.data.value !== newValue) {
+                    this.setData({ value: newValue });
+                }
+            },
+        },
         integer: Boolean,
         disabled: Boolean,
-        inputWidth: null,
-        buttonSize: null,
+        inputWidth: {
+            type: null,
+            observer() {
+                this.setData({
+                    inputStyle: this.computeInputStyle()
+                });
+            },
+        },
+        buttonSize: {
+            type: null,
+            observer() {
+                this.setData({
+                    inputStyle: this.computeInputStyle(),
+                    buttonStyle: this.computeButtonStyle()
+                });
+            }
+        },
         asyncChange: Boolean,
         disableInput: Boolean,
         decimalLength: {
@@ -45,28 +71,6 @@ VantComponent({
         disablePlus: Boolean,
         disableMinus: Boolean
     },
-    watch: {
-        value(value) {
-            if (value === '') {
-                return;
-            }
-            const newValue = this.range(value);
-            if (typeof newValue === 'number' && +this.data.value !== newValue) {
-                this.setData({ value: newValue });
-            }
-        },
-        inputWidth() {
-            this.set({
-                inputStyle: this.computeInputStyle()
-            });
-        },
-        buttonSize() {
-            this.set({
-                inputStyle: this.computeInputStyle(),
-                buttonStyle: this.computeButtonStyle()
-            });
-        }
-    },
     data: {
         focus: false,
         inputStyle: '',

dist/steps/index.js

@@ -1,6 +1,7 @@
 import { VantComponent } from '../common/component';
 import { GREEN, GRAY_DARK } from '../common/color';
 VantComponent({
+    classes: ['desc-class'],
     props: {
         icon: String,
         steps: Array,

dist/steps/index.wxml

@@ -10,7 +10,7 @@
     >
       <view class="van-step__title" style="{{ index === active ? 'color: ' + activeColor : '' }}">
         <view>{{ item.text }}</view>
-        <view>{{ item.desc }}</view>
+        <view class="desc-class">{{ item.desc }}</view>
       </view>
       <view class="van-step__circle-container">
         <block wx:if="{{ index !== active }}">

dist/switch/index.js

@@ -4,7 +4,13 @@ VantComponent({
     field: true,
     classes: ['node-class'],
     props: {
-        checked: null,
+        checked: {
+            type: null,
+            observer(value) {
+                const loadingColor = this.getLoadingColor(value);
+                this.setData({ value, loadingColor });
+            }
+        },
         loading: Boolean,
         disabled: Boolean,
         activeColor: String,
@@ -22,12 +28,6 @@ VantComponent({
             value: false
         }
     },
-    watch: {
-        checked(value) {
-            const loadingColor = this.getLoadingColor(value);
-            this.setData({ value, loadingColor });
-        }
-    },
     created() {
         const { checked: value } = this.data;
         const loadingColor = this.getLoadingColor(value);

dist/tab/index.js

@@ -11,11 +11,26 @@ VantComponent({
         }
     },
     props: {
-        dot: Boolean,
-        info: null,
-        title: String,
-        disabled: Boolean,
-        titleStyle: String,
+        dot: {
+            type: Boolean,
+            observer: 'update'
+        },
+        info: {
+            type: null,
+            observer: 'update'
+        },
+        title: {
+            type: String,
+            observer: 'update'
+        },
+        disabled: {
+            type: Boolean,
+            observer: 'update'
+        },
+        titleStyle: {
+            type: String,
+            observer: 'update'
+        },
         name: {
             type: [Number, String],
             value: '',
@@ -24,13 +39,6 @@ VantComponent({
     data: {
         active: false
     },
-    watch: {
-        title: 'update',
-        disabled: 'update',
-        dot: 'update',
-        info: 'update',
-        titleStyle: 'update'
-    },
     methods: {
         getComputedName() {
             if (this.data.name !== '') {

lib/area/index.js

@@ -16,12 +16,24 @@ var shared_1 = require("../picker/shared");
 var COLUMNSPLACEHOLDERCODE = '000000';
 component_1.VantComponent({
     classes: ['active-class', 'toolbar-class', 'column-class'],
-    props: __assign(__assign({}, shared_1.pickerProps), { value: String, areaList: {
+    props: __assign(__assign({}, shared_1.pickerProps), { value: {
+            type: String,
+            observer: function (value) {
+                this.code = value;
+                this.setValues();
+            },
+        }, areaList: {
             type: Object,
-            value: {}
+            value: {},
+            observer: 'setValues'
         }, columnsNum: {
             type: null,
-            value: 3
+            value: 3,
+            observer: function (value) {
+                this.setData({
+                    displayColumns: this.data.columns.slice(0, +value)
+                });
+            }
         }, columnsPlaceholder: {
             type: Array,
             observer: function (val) {
@@ -39,18 +51,6 @@ component_1.VantComponent({
         displayColumns: [{ values: [] }, { values: [] }, { values: [] }],
         typeToColumnsPlaceholder: {}
     },
-    watch: {
-        value: function (value) {
-            this.code = value;
-            this.setValues();
-        },
-        areaList: 'setValues',
-        columnsNum: function (value) {
-            this.setData({
-                displayColumns: this.data.columns.slice(0, +value)
-            });
-        }
-    },
     mounted: function () {
         var _this = this;
         setTimeout(function () {

lib/common/component.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var basic_1 = require("../mixins/basic");
-var index_1 = require("../mixins/observer/index");
 function mapKeys(source, target, map) {
     Object.keys(map).forEach(function (key) {
         if (source[key]) {
@@ -46,7 +45,6 @@ function VantComponent(vantOptions) {
         multipleSlots: true,
         addGlobalClass: true
     };
-    index_1.observe(vantOptions, options);
     Component(options);
 }
 exports.VantComponent = VantComponent;

lib/datetime-picker/index.js

@@ -53,9 +53,13 @@ function getMonthEndDay(year, month) {
 var defaultFormatter = function (_, value) { return value; };
 component_1.VantComponent({
     classes: ['active-class', 'toolbar-class', 'column-class'],
-    props: __assign(__assign({}, shared_1.pickerProps), { value: null, filter: null, type: {
+    props: __assign(__assign({}, shared_1.pickerProps), { value: {
+            type: null,
+            observer: 'updateValue'
+        }, filter: null, type: {
             type: String,
-            value: 'datetime'
+            value: 'datetime',
+            observer: 'updateValue'
         }, showToolbar: {
             type: Boolean,
             value: true
@@ -64,37 +68,33 @@ component_1.VantComponent({
             value: defaultFormatter
         }, minDate: {
             type: Number,
-            value: new Date(currentYear - 10, 0, 1).getTime()
+            value: new Date(currentYear - 10, 0, 1).getTime(),
+            observer: 'updateValue'
         }, maxDate: {
             type: Number,
-            value: new Date(currentYear + 10, 11, 31).getTime()
+            value: new Date(currentYear + 10, 11, 31).getTime(),
+            observer: 'updateValue'
         }, minHour: {
             type: Number,
-            value: 0
+            value: 0,
+            observer: 'updateValue'
         }, maxHour: {
             type: Number,
-            value: 23
+            value: 23,
+            observer: 'updateValue'
         }, minMinute: {
             type: Number,
-            value: 0
+            value: 0,
+            observer: 'updateValue'
         }, maxMinute: {
             type: Number,
-            value: 59
+            value: 59,
+            observer: 'updateValue'
         } }),
     data: {
         innerValue: Date.now(),
         columns: []
     },
-    watch: {
-        value: 'updateValue',
-        type: 'updateValue',
-        minDate: 'updateValue',
-        maxDate: 'updateValue',
-        minHour: 'updateValue',
-        maxHour: 'updateValue',
-        minMinute: 'updateValue',
-        maxMinute: 'updateValue'
-    },
     methods: {
         updateValue: function () {
             var _this = this;

lib/dialog/index.js

@@ -7,7 +7,12 @@ var color_1 = require("../common/color");
 component_1.VantComponent({
     mixins: [button_1.button, open_type_1.openType],
     props: {
-        show: Boolean,
+        show: {
+            type: Boolean,
+            observer: function (show) {
+                !show && this.stopLoading();
+            }
+        },
         title: String,
         message: String,
         useSlot: Boolean,
@@ -60,11 +65,6 @@ component_1.VantComponent({
             cancel: false
         }
     },
-    watch: {
-        show: function (show) {
-            !show && this.stopLoading();
-        }
-    },
     methods: {
         onConfirm: function () {
             this.handleAction('confirm');

lib/image/index.js

@@ -14,7 +14,15 @@ component_1.VantComponent({
     mixins: [button_1.button, open_type_1.openType],
     classes: ['custom-class', 'loading-class', 'error-class', 'image-class'],
     props: {
-        src: String,
+        src: {
+            type: String,
+            observer: function () {
+                this.setData({
+                    error: false,
+                    loading: true
+                });
+            }
+        },
         round: Boolean,
         width: {
             type: null,
@@ -47,14 +55,6 @@ component_1.VantComponent({
         error: false,
         loading: true
     },
-    watch: {
-        src: function () {
-            this.setData({
-                error: false,
-                loading: true
-            });
-        }
-    },
     mounted: function () {
         this.setMode();
         this.setStyle();

lib/mixins/basic.js

@@ -9,6 +9,10 @@ exports.basic = Behavior({
             }
             this.triggerEvent.apply(this, args);
         },
+        set: function (data, callback) {
+            this.setData(data, callback);
+            return new Promise(function (resolve) { return wx.nextTick(resolve); });
+        },
         getRect: function (selector, all) {
             var _this = this;
             return new Promise(function (resolve) {

lib/mixins/observer/behavior.js

@@ -1,10 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.behavior = Behavior({
-    methods: {
-        set: function (data, callback) {
-            this.setData(data, callback);
-            return new Promise(function (resolve) { return wx.nextTick(resolve); });
-        }
-    }
-});

lib/mixins/observer/index.js

@@ -1,22 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var behavior_1 = require("./behavior");
-function observe(vantOptions, options) {
-    var watch = vantOptions.watch;
-    options.behaviors.push(behavior_1.behavior);
-    if (watch) {
-        var props_1 = options.properties || {};
-        Object.keys(watch).forEach(function (key) {
-            if (key in props_1) {
-                var prop = props_1[key];
-                if (prop === null || !('type' in prop)) {
-                    prop = { type: prop };
-                }
-                prop.observer = watch[key];
-                props_1[key] = prop;
-            }
-        });
-        options.properties = props_1;
-    }
-}
-exports.observe = observe;

lib/nav-bar/index.wxss

@@ -1 +1 @@
-@import '../common/index.wxss';.van-nav-bar{position:relative;text-align:center;-webkit-user-select:none;user-select:none;height:44px;height:var(--nav-bar-height,44px);line-height:44px;line-height:var(--nav-bar-height,44px);background-color:#fff;background-color:var(--nav-bar-background-color,#fff)}.van-nav-bar__text{display:inline-block;vertical-align:middle;margin:0 -16px;margin:0 -var(--padding-md,16px);padding:0 16px;padding:0 var(--padding-md,16px);color:#1989fa;color:var(--nav-bar-text-color,#1989fa)}.van-nav-bar__text--hover{background-color:#f2f3f5;background-color:var(--active-color,#f2f3f5)}.van-nav-bar__arrow{vertical-align:middle;font-size:16px;font-size:var(--nav-bar-arrow-size,16px);color:#1989fa;color:var(--nav-bar-text-color,#1989fa)}.van-nav-bar__arrow+.van-nav-bar__text{margin-left:-20px;padding-left:25px}.van-nav-bar--fixed{position:fixed;top:0;left:0;width:100%}.van-nav-bar__title{max-width:60%;margin:0 auto;color:#323233;color:var(--nav-bar-title-text-color,#323233);font-weight:500;font-weight:var(--font-weight-bold,500);font-size:16px;font-size:var(--nav-bar-title-font-size,16px)}.van-nav-bar__left,.van-nav-bar__right{position:absolute;bottom:0;font-size:14px;font-size:var(--font-size-md,14px)}.van-nav-bar__left{left:16px;left:var(--padding-md,16px)}.van-nav-bar__right{right:16px;right:var(--padding-md,16px)}
+@import '../common/index.wxss';.van-nav-bar{position:relative;text-align:center;-webkit-user-select:none;user-select:none;height:44px;height:var(--nav-bar-height,44px);line-height:44px;line-height:var(--nav-bar-height,44px);background-color:#fff;background-color:var(--nav-bar-background-color,#fff)}.van-nav-bar__text{display:inline-block;vertical-align:middle;margin:0 -16px;margin:0 -var(--padding-md,16px);padding:0 16px;padding:0 var(--padding-md,16px);color:#1989fa;color:var(--nav-bar-text-color,#1989fa)}.van-nav-bar__text--hover{background-color:#f2f3f5;background-color:var(--active-color,#f2f3f5)}.van-nav-bar__arrow{vertical-align:middle;font-size:16px;font-size:var(--nav-bar-arrow-size,16px);color:#1989fa;color:var(--nav-bar-text-color,#1989fa)}.van-nav-bar__arrow+.van-nav-bar__text{margin-left:-20px;padding-left:25px}.van-nav-bar--fixed{position:fixed;top:0;left:0;width:100%}.van-nav-bar__title{max-width:60%;margin:0 auto;color:#323233;color:var(--nav-bar-title-text-color,#323233);font-weight:500;font-weight:var(--font-weight-bold,500);font-size:16px;font-size:var(--nav-bar-title-font-size,16px)}.van-nav-bar__left,.van-nav-bar__right{position:absolute;bottom:0;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;font-size:14px;font-size:var(--font-size-md,14px)}.van-nav-bar__left{left:16px;left:var(--padding-md,16px)}.van-nav-bar__right{right:16px;right:var(--padding-md,16px)}

lib/notice-bar/index.js

@@ -7,7 +7,13 @@ component_1.VantComponent({
     props: {
         text: {
             type: String,
-            value: ''
+            value: '',
+            observer: function () {
+                var _this = this;
+                wx.nextTick(function () {
+                    _this.init();
+                });
+            },
         },
         mode: {
             type: String,
@@ -27,7 +33,13 @@ component_1.VantComponent({
         },
         speed: {
             type: Number,
-            value: 50
+            value: 50,
+            observer: function () {
+                var _this = this;
+                wx.nextTick(function () {
+                    _this.init();
+                });
+            }
         },
         scrollable: {
             type: Boolean,
@@ -50,14 +62,6 @@ component_1.VantComponent({
     data: {
         show: true
     },
-    watch: {
-        text: function () {
-            this.setData({}, this.init);
-        },
-        speed: function () {
-            this.setData({}, this.init);
-        }
-    },
     created: function () {
         this.resetAnimation = wx.createAnimation({
             duration: 0,

lib/picker-column/index.js

@@ -16,7 +16,10 @@ component_1.VantComponent({
         },
         defaultIndex: {
             type: Number,
-            value: 0
+            value: 0,
+            observer: function (value) {
+                this.setIndex(value);
+            }
         }
     },
     data: {
@@ -37,11 +40,6 @@ component_1.VantComponent({
             _this.setIndex(defaultIndex);
         });
     },
-    watch: {
-        defaultIndex: function (value) {
-            this.setIndex(value);
-        }
-    },
     methods: {
         getCount: function () {
             return this.data.options.length;

lib/row/index.js

@@ -12,10 +12,10 @@ component_1.VantComponent({
         }
     },
     props: {
-        gutter: Number
-    },
-    watch: {
-        gutter: 'setGutter'
+        gutter: {
+            type: Number,
+            observer: 'setGutter'
+        }
     },
     mounted: function () {
         if (this.data.gutter) {

lib/slider/index.js

@@ -24,18 +24,16 @@ component_1.VantComponent({
         },
         value: {
             type: Number,
-            value: 0
+            value: 0,
+            observer: function (value) {
+                this.updateValue(value, false);
+            }
         },
         barHeight: {
             type: null,
             value: '2px'
         }
     },
-    watch: {
-        value: function (value) {
-            this.updateValue(value, false);
-        }
-    },
     created: function () {
         this.updateValue(this.data.value);
     },

lib/stepper/index.js

@@ -13,11 +13,37 @@ component_1.VantComponent({
     field: true,
     classes: ['input-class', 'plus-class', 'minus-class'],
     props: {
-        value: null,
+        value: {
+            type: null,
+            observer: function (value) {
+                if (value === '') {
+                    return;
+                }
+                var newValue = this.range(value);
+                if (typeof newValue === 'number' && +this.data.value !== newValue) {
+                    this.setData({ value: newValue });
+                }
+            },
+        },
         integer: Boolean,
         disabled: Boolean,
-        inputWidth: null,
-        buttonSize: null,
+        inputWidth: {
+            type: null,
+            observer: function () {
+                this.setData({
+                    inputStyle: this.computeInputStyle()
+                });
+            },
+        },
+        buttonSize: {
+            type: null,
+            observer: function () {
+                this.setData({
+                    inputStyle: this.computeInputStyle(),
+                    buttonStyle: this.computeButtonStyle()
+                });
+            }
+        },
         asyncChange: Boolean,
         disableInput: Boolean,
         decimalLength: {
@@ -47,28 +73,6 @@ component_1.VantComponent({
         disablePlus: Boolean,
         disableMinus: Boolean
     },
-    watch: {
-        value: function (value) {
-            if (value === '') {
-                return;
-            }
-            var newValue = this.range(value);
-            if (typeof newValue === 'number' && +this.data.value !== newValue) {
-                this.setData({ value: newValue });
-            }
-        },
-        inputWidth: function () {
-            this.set({
-                inputStyle: this.computeInputStyle()
-            });
-        },
-        buttonSize: function () {
-            this.set({
-                inputStyle: this.computeInputStyle(),
-                buttonStyle: this.computeButtonStyle()
-            });
-        }
-    },
     data: {
         focus: false,
         inputStyle: '',

lib/steps/index.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var component_1 = require("../common/component");
 var color_1 = require("../common/color");
 component_1.VantComponent({
+    classes: ['desc-class'],
     props: {
         icon: String,
         steps: Array,

lib/steps/index.wxml

@@ -10,7 +10,7 @@
     >
       <view class="van-step__title" style="{{ index === active ? 'color: ' + activeColor : '' }}">
         <view>{{ item.text }}</view>
-        <view>{{ item.desc }}</view>
+        <view class="desc-class">{{ item.desc }}</view>
       </view>
       <view class="van-step__circle-container">
         <block wx:if="{{ index !== active }}">

lib/switch/index.js

@@ -6,7 +6,13 @@ component_1.VantComponent({
     field: true,
     classes: ['node-class'],
     props: {
-        checked: null,
+        checked: {
+            type: null,
+            observer: function (value) {
+                var loadingColor = this.getLoadingColor(value);
+                this.setData({ value: value, loadingColor: loadingColor });
+            }
+        },
         loading: Boolean,
         disabled: Boolean,
         activeColor: String,
@@ -24,12 +30,6 @@ component_1.VantComponent({
             value: false
         }
     },
-    watch: {
-        checked: function (value) {
-            var loadingColor = this.getLoadingColor(value);
-            this.setData({ value: value, loadingColor: loadingColor });
-        }
-    },
     created: function () {
         var value = this.data.checked;
         var loadingColor = this.getLoadingColor(value);

lib/tab/index.js

@@ -13,11 +13,26 @@ component_1.VantComponent({
         }
     },
     props: {
-        dot: Boolean,
-        info: null,
-        title: String,
-        disabled: Boolean,
-        titleStyle: String,
+        dot: {
+            type: Boolean,
+            observer: 'update'
+        },
+        info: {
+            type: null,
+            observer: 'update'
+        },
+        title: {
+            type: String,
+            observer: 'update'
+        },
+        disabled: {
+            type: Boolean,
+            observer: 'update'
+        },
+        titleStyle: {
+            type: String,
+            observer: 'update'
+        },
         name: {
             type: [Number, String],
             value: '',
@@ -26,13 +41,6 @@ component_1.VantComponent({
     data: {
         active: false
     },
-    watch: {
-        title: 'update',
-        disabled: 'update',
-        dot: 'update',
-        info: 'update',
-        titleStyle: 'update'
-    },
     methods: {
         getComputedName: function () {
             if (this.data.name !== '') {

lib/tabs/index.js

@@ -10,9 +10,9 @@ component_1.VantComponent({
         name: 'tab',
         type: 'descendant',
         linked: function (target) {
-            this.children = this.getChildren();
+            target.index = this.children.length;
+            this.children.push(target);
             this.updateTabs();
-            this.setLine();
         },
         unlinked: function (target) {
             this.children = this.children
@@ -22,7 +22,6 @@ component_1.VantComponent({
                 return child;
             });
             this.updateTabs();
-            this.setLine();
         }
     },
     props: {
@@ -283,14 +282,6 @@ component_1.VantComponent({
                     this.setCurrentIndex(currentIndex + 1);
                 }
             }
-        },
-        getChildren: function () {
-          var nodes = this.getRelationNodes('../tab/index')
-          nodes.map((child, index) => {
-            child.index = index;
-            return child;
-          })
-          return nodes;
         }
     }
 });