build

dist/area/index.js

@@ -2,14 +2,8 @@ import { VantComponent } from '../common/component';
 VantComponent({
     props: {
         title: String,
+        value: String,
         loading: Boolean,
-        value: {
-            type: String,
-            observer(value) {
-                this.code = value;
-                this.setValues();
-            }
-        },
         itemHeight: {
             type: Number,
             value: 44
@@ -24,10 +18,7 @@ VantComponent({
         },
         areaList: {
             type: Object,
-            value: {},
+            value: {}
-            observer() {
-                this.setValues();
-            }
         }
     },
     data: {
@@ -40,6 +31,13 @@ VantComponent({
             return columns.slice(0, +columnsNum);
         }
     },
+    watch: {
+        value(value) {
+            this.code = value;
+            this.setValues();
+        },
+        areaList: 'setValues'
+    },
     methods: {
         onCancel() {
             this.$emit('cancel', {

dist/badge-group/index.js

@@ -1,7 +1,7 @@
 import { VantComponent } from '../common/component';
 VantComponent({
-    relations: {
+    relation: {
-        '../badge/index': {
+        name: 'badge',
         type: 'descendant',
         linked(target) {
             this.data.badges.push(target);
@@ -11,18 +11,19 @@ VantComponent({
             this.data.badges = this.data.badges.filter(item => item !== target);
             this.setActive();
         }
-        }
     },
     props: {
         active: {
             type: Number,
-            value: 0,
+            value: 0
-            observer: 'setActive'
         }
     },
     data: {
         badges: []
     },
+    watch: {
+        active: 'setActive'
+    },
     beforeCreate() {
         this.currentActive = -1;
     },

dist/badge/index.js

@@ -1,9 +1,8 @@
 import { VantComponent } from '../common/component';
 VantComponent({
-    relations: {
+    relation: {
-        '../badge-group/index': {
+        type: 'ancestor',
-            type: 'ancestor'
+        name: 'badge-group'
-        }
     },
     props: {
         info: Number,

dist/button/index.js

@@ -1,7 +1,8 @@
 import { VantComponent } from '../common/component';
 import { button } from '../mixins/button';
+import { openType } from '../mixins/open-type';
 VantComponent({
-    mixins: [button],
+    mixins: [button, openType],
     props: {
         plain: Boolean,
         block: Boolean,

dist/button/index.wxml

@@ -1,5 +1,6 @@
 <button
   class="custom-class van-button {{ classes }}"
+  id="{{ id }}"
   disabled="{{ disabled }}"
   hover-class="button-hover"
   open-type="{{ openType }}"
@@ -14,11 +15,11 @@
   send-message-img="{{ sendMessageImg }}"
   show-message-card="{{ showMessageCard }}"
   bind:tap="onClick"
-  bindcontact="bindcontact"
+  bindcontact="bindContact"
-  bindgetuserinfo="bindgetuserinfo"
+  bindgetuserinfo="bindGetUserInfo"
-  bindgetphonenumber="bindgetphonenumber"
+  bindgetphonenumber="bindGetPhoneNumber"
-  binderror="binderror"
+  binderror="bindError"
-  bindopensetting="bindopensetting"
+  bindopensetting="bindOpenSetting"
 >
   <van-loading
     wx:if="{{ loading }}"

dist/col/index.js

@@ -1,9 +1,8 @@
 import { VantComponent } from '../common/component';
 VantComponent({
-    relations: {
+    relation: {
-        '../row/index': {
+        name: 'row',
         type: 'ancestor'
-        }
     },
     props: {
         span: Number,

dist/common/component.js

@@ -2,12 +2,14 @@ import { basic } from '../mixins/basic';
 import { observe } from '../mixins/observer/index';
 function mapKeys(source, target, map) {
     Object.keys(map).forEach(key => {
+        if (source[key]) {
             target[map[key]] = source[key];
+        }
     });
 }
-function VantComponent(sfc) {
+function VantComponent(vantOptions) {
     const options = {};
-    mapKeys(sfc, options, {
+    mapKeys(vantOptions, options, {
         data: 'data',
         props: 'properties',
         mixins: 'behaviors',
@@ -15,10 +17,16 @@ function VantComponent(sfc) {
         beforeCreate: 'created',
         created: 'attached',
         mounted: 'ready',
-        destroyed: 'detached',
         relations: 'relations',
+        destroyed: 'detached',
         classes: 'externalClasses'
     });
+    const { relation } = vantOptions;
+    if (relation) {
+        options.relations = Object.assign(options.relations || {}, {
+            [`../${relation.name}/index`]: relation
+        });
+    }
     // add default externalClasses
     options.externalClasses = options.externalClasses || [];
     options.externalClasses.push('custom-class');
@@ -26,7 +34,7 @@ function VantComponent(sfc) {
     options.behaviors = options.behaviors || [];
     options.behaviors.push(basic);
     // map field to form-field behavior
-    if (sfc.field) {
+    if (vantOptions.field) {
         options.behaviors.push('wx://form-field');
     }
     // add default options
@@ -34,7 +42,7 @@ function VantComponent(sfc) {
         multipleSlots: true,
         addGlobalClass: true
     };
-    observe(sfc, options);
+    observe(vantOptions, options);
     Component(options);
 }
 export { VantComponent };

dist/dialog/index.js

@@ -1,25 +1,15 @@
 import { VantComponent } from '../common/component';
+import { openType } from '../mixins/open-type';
 VantComponent({
+    mixins: [openType],
     props: {
+        show: Boolean,
         title: String,
         message: String,
         useSlot: Boolean,
         asyncClose: Boolean,
         showCancelButton: Boolean,
         confirmButtonOpenType: String,
-        show: {
-            type: Boolean,
-            observer(show) {
-                if (!show) {
-                    this.setData({
-                        loading: {
-                            confirm: false,
-                            cancel: false
-                        }
-                    });
-                }
-            }
-        },
         zIndex: {
             type: Number,
             value: 100
@@ -51,6 +41,18 @@ VantComponent({
             cancel: false
         }
     },
+    watch: {
+        show(show) {
+            if (!show) {
+                this.setData({
+                    loading: {
+                        confirm: false,
+                        cancel: false
+                    }
+                });
+            }
+        }
+    },
     methods: {
         onConfirm() {
             this.handleAction('confirm');
@@ -70,7 +72,9 @@ VantComponent({
             this.onClose(action);
         },
         close() {
-            this.setData({ show: false });
+            this.setData({
+                show: false
+            });
         },
         onClose(action) {
             if (!this.data.asyncClose) {

dist/dialog/index.wxml

@@ -37,6 +37,11 @@
         custom-class="van-dialog__confirm"
         open-type="{{ confirmButtonOpenType }}"
         bind:click="onConfirm"
+        bindcontact="bindContact"
+        bindgetuserinfo="bindGetUserInfo"
+        bindgetphonenumber="bindGetPhoneNumber"
+        binderror="bindError"
+        bindopensetting="bindOpenSetting"
       >
         {{ confirmButtonText }}
       </van-button>

dist/mixins/button.js

@@ -1,7 +1,6 @@
 export const button = Behavior({
     properties: {
-    loading: Boolean,
+        id: String,
-    openType: String,
         appParameter: String,
         sendMessageTitle: String,
         sendMessagePath: String,
@@ -24,27 +23,5 @@ export const button = Behavior({
             type: String,
             value: ''
         }
-  },
-
-  methods: {
-    bindgetuserinfo(event = {}) {
-      this.$emit('getuserinfo', event.detail);
-    },
-
-    bindcontact(event = {}) {
-      this.$emit('contact', event.detail);
-    },
-
-    bindgetphonenumber(event = {}) {
-      this.$emit('getphonenumber', event.detail);
-    },
-
-    bindopensetting(event = {}) {
-      this.$emit('opensetting', event.detail);
-    },
-
-    binderror(event = {}) {
-      this.$emit('error', event.detail);
-    }
     }
 });

dist/mixins/observer/index.js

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

dist/mixins/open-type.js

@@ -0,0 +1,22 @@
+export const openType = Behavior({
+    properties: {
+        openType: String
+    },
+    methods: {
+        bindGetUserInfo(event) {
+            this.$emit('getuserinfo', event.detail);
+        },
+        bindContact(event) {
+            this.$emit('contact', event.detail);
+        },
+        bindGetPhoneNumber(event) {
+            this.$emit('getphonenumber', event.detail);
+        },
+        bindOpenSetting(event) {
+            this.$emit('opensetting', event.detail);
+        },
+        bindError(event) {
+            this.$emit('error', event.detail);
+        }
+    }
+});

dist/mixins/touch.js

@@ -9,7 +9,6 @@ export const touch = Behavior({
             this.startX = event.touches[0].clientX;
             this.startY = event.touches[0].clientY;
         },
-
         touchMove(event) {
             const touch = event.touches[0];
             this.deltaX = touch.clientX - this.startX;

dist/mixins/transition.js

@@ -3,37 +3,36 @@ export const transition = function(showDefaultValue) {
         properties: {
             customStyle: String,
             show: {
-        value: showDefaultValue,
                 type: Boolean,
-        observer(value) {
+                value: showDefaultValue,
-          if (value) {
+                observer: 'observeShow'
-            this.show();
-          } else {
-            this.setData({
-              type: 'leave'
-            });
-          }
-        }
             },
             duration: {
                 type: Number,
                 value: 300
             }
         },
-
         data: {
             type: '',
             inited: false,
             display: false
         },
-
         attached() {
             if (this.data.show) {
                 this.show();
             }
         },
-
         methods: {
+            observeShow(value) {
+                if (value) {
+                    this.show();
+                }
+                else {
+                    this.setData({
+                        type: 'leave'
+                    });
+                }
+            },
             show() {
                 this.setData({
                     inited: true,
@@ -41,7 +40,6 @@ export const transition = function(showDefaultValue) {
                     type: 'enter'
                 });
             },
-
             onAnimationEnd() {
                 if (!this.data.show) {
                     this.setData({

dist/nav-bar/index.js

@@ -1,8 +1,6 @@
 import { VantComponent } from '../common/component';
-
 VantComponent({
     classes: ['title-class'],
-
     props: {
         title: String,
         leftText: String,
@@ -14,12 +12,10 @@ VantComponent({
             value: 1
         }
     },
-
     methods: {
         onClickLeft() {
             this.$emit('click-left');
         },
-
         onClickRight() {
             this.$emit('click-right');
         }

dist/notice-bar/index.js

@@ -1,16 +1,11 @@
 import { VantComponent } from '../common/component';
-
 const FONT_COLOR = '#f60';
 const BG_COLOR = '#fff7cc';
-
 VantComponent({
     props: {
         text: {
             type: String,
-      value: '',
+            value: ''
-      observer() {
-        this.setData({}, this.init);
-      }
         },
         mode: {
             type: String,
@@ -49,7 +44,6 @@ VantComponent({
             value: BG_COLOR
         }
     },
-
     data: {
         show: true,
         hasRightIcon: false,
@@ -60,7 +54,11 @@ VantComponent({
         resetAnimation: null,
         timer: null
     },
-
+    watch: {
+        text() {
+            this.setData({}, this.init);
+        }
+    },
     created() {
         if (this.data.mode) {
             this.setData({
@@ -68,12 +66,10 @@ VantComponent({
             });
         }
     },
-
     destroyed() {
         const { timer } = this.data;
         timer && clearTimeout(timer);
     },
-
     methods: {
         init() {
             this.getRect('.van-notice-bar__content').then(rect => {
@@ -83,17 +79,12 @@ VantComponent({
                 this.setData({
                     width: rect.width
                 });
-
                 this.getRect('.van-notice-bar__content-wrap').then(rect => {
                     if (!rect || !rect.width) {
                         return;
                     }
-
                     const wrapWidth = rect.width;
-          const {
+                    const { width, speed, scrollable, delay } = this.data;
-            width, speed, scrollable, delay
-          } = this.data;
-
                     if (scrollable && wrapWidth < width) {
                         const elapse = width / speed * 1000;
                         const animation = wx.createAnimation({
@@ -105,7 +96,6 @@ VantComponent({
                             duration: 0,
                             timeingFunction: 'linear'
                         });
-
                         this.setData({
                             elapse,
                             wrapWidth,
@@ -118,11 +108,8 @@ VantComponent({
                 });
             });
         },
-
         scroll() {
-      const {
+            const { animation, resetAnimation, wrapWidth, elapse, speed } = this.data;
-        animation, resetAnimation, wrapWidth, elapse, speed
-      } = this.data;
             resetAnimation.translateX(wrapWidth).step();
             const animationData = animation.translateX(-(elapse * speed) / 1000).step();
             this.setData({
@@ -133,16 +120,13 @@ VantComponent({
                     animationData: animationData.export()
                 });
             }, 100);
-
             const timer = setTimeout(() => {
                 this.scroll();
             }, elapse);
-
             this.setData({
                 timer
             });
         },
-
         onClickIcon() {
             const { timer } = this.data;
             timer && clearTimeout(timer);
@@ -151,7 +135,6 @@ VantComponent({
                 timer: null
             });
         },
-
         onClick(event) {
             this.$emit('click', event);
         }

dist/notify/index.js

@@ -1,5 +1,4 @@
 import { VantComponent } from '../common/component';
-
 VantComponent({
     props: {
         text: String,
@@ -16,23 +15,19 @@ VantComponent({
             value: 3000
         }
     },
-
     methods: {
         show() {
             const { duration } = this.data;
-
             clearTimeout(this.timer);
             this.setData({
                 show: true
             });
-
             if (duration > 0 && duration !== Infinity) {
                 this.timer = setTimeout(() => {
                     this.hide();
                 }, duration);
             }
         },
-
         hide() {
             clearTimeout(this.timer);
             this.setData({

dist/notify/notify.js

@@ -1,23 +1,17 @@
 import { isObj } from '../common/utils';
-
 const defaultOptions = {
     selector: '#van-notify',
     duration: 3000
 };
-
 function parseOptions(text) {
     return isObj(text) ? text : { text };
 }
-
 export default function Notify(options = {}) {
     const pages = getCurrentPages();
     const ctx = pages[pages.length - 1];
-
     options = Object.assign({}, defaultOptions, parseOptions(options));
-
     const el = ctx.selectComponent(options.selector);
     delete options.selector;
-
     if (el) {
         el.setData(options);
         el.show();

dist/overlay/index.js

@@ -1,5 +1,4 @@
 import { VantComponent } from '../common/component';
-
 VantComponent({
     props: {
         show: Boolean,
@@ -10,12 +9,10 @@ VantComponent({
             value: 1
         }
     },
-
     methods: {
         onClick() {
             this.$emit('click');
         },
-
         // for prevent touchmove
         noop() { }
     }

dist/panel/index.js

@@ -1,8 +1,6 @@
 import { VantComponent } from '../common/component';
-
 VantComponent({
     classes: ['footer-class'],
-
     props: {
         desc: String,
         title: String,

dist/popup/index.js

@@ -1,9 +1,7 @@
 import { VantComponent } from '../common/component';
 import { transition } from '../mixins/transition';
-
 VantComponent({
     mixins: [transition(false)],
-
     props: {
         transition: String,
         customStyle: String,
@@ -25,11 +23,9 @@ VantComponent({
             value: 'center'
         }
     },
-
     methods: {
         onClickOverlay() {
             this.$emit('click-overlay');
-
             if (this.data.closeOnClickOverlay) {
                 this.$emit('close');
             }

dist/progress/index.js

@@ -1,103 +1,63 @@
 import { VantComponent } from '../common/component';
-
 VantComponent({
     props: {
-    inactive: {
+        inactive: Boolean,
-      type: Boolean,
+        percentage: Number,
-      observer() {
+        pivotText: String,
-        this.setPivotStyle();
+        pivotColor: String,
-        this.setPortionStyle();
-      }
-    },
-    pivotColor: {
-      type: String,
-      observer: 'setPivotStyle'
-    },
-    percentage: {
-      type: Number,
-      observer() {
-        this.setText();
-        this.setPortionStyle();
-      }
-    },
         showPivot: {
             type: Boolean,
-      value: true,
+            value: true
-      observer: 'getWidth'
-    },
-    pivotText: {
-      type: String,
-      observer() {
-        this.setText();
-        this.getWidth();
-      }
         },
         color: {
             type: String,
-      value: '#38f',
+            value: '#38f'
-      observer() {
-        this.setPivotStyle();
-        this.setPortionStyle();
-      }
         },
         textColor: {
             type: String,
-      value: '#fff',
+            value: '#fff'
-      observer: 'setPivotStyle'
         }
     },
-
     data: {
         pivotWidth: 0,
         progressWidth: 0
     },
-
+    watch: {
+        pivotText: 'getWidth',
+        showPivot: 'getWidth'
+    },
+    computed: {
+        portionStyle() {
+            const width = (this.data.progressWidth - this.data.pivotWidth) * this.data.percentage / 100 + 'px';
+            const background = this.getCurrentColor();
+            return `width: ${width}; background: ${background}; `;
+        },
+        pivotStyle() {
+            const color = this.data.textColor;
+            const background = this.data.pivotColor || this.getCurrentColor();
+            return `color: ${color}; background: ${background}`;
+        },
+        text() {
+            return this.data.pivotText || this.data.percentage + '%';
+        }
+    },
     mounted() {
-    this.setText();
-    this.setPivotStyle();
         this.getWidth();
     },
-
     methods: {
         getCurrentColor() {
             return this.data.inactive ? '#cacaca' : this.data.color;
         },
-
-    setText() {
-      this.setData({
-        text: this.data.pivotText || this.data.percentage + '%'
-      });
-    },
-
-    setPortionStyle() {
-      const width = (this.data.progressWidth - this.data.pivotWidth) * this.data.percentage / 100 + 'px';
-      const background = this.getCurrentColor();
-      this.setData({
-        portionStyle: `width: ${width}; background: ${background}; `
-      });
-    },
-
-    setPivotStyle() {
-      const color = this.data.textColor;
-      const background = this.data.pivotColor || this.getCurrentColor();
-      this.setData({
-        pivotStyle: `color: ${color}; background: ${background}`
-      });
-    },
-
         getWidth() {
             this.getRect('.van-progress').then(rect => {
                 this.setData({
                     progressWidth: rect.width
                 });
-        this.setPortionStyle();
             });
-
             this.getRect('.van-progress__pivot').then(rect => {
                 this.setData({
                     pivotWidth: rect.width || 0
                 });
-        this.setPortionStyle();
             });
         }
     }

dist/radio-group/index.js

@@ -1,8 +1,7 @@
 import { VantComponent } from '../common/component';
-
 VantComponent({
-  relations: {
+    relation: {
-    '../radio/index': {
+        name: 'radio',
         type: 'descendant',
         linked(target) {
             const { value, disabled } = this.data;
@@ -11,27 +10,23 @@ VantComponent({
                 disabled: disabled || target.data.disabled
             });
         }
-    }
     },
-
     props: {
-    value: {
+        value: null,
-      type: null,
+        disabled: Boolean
-      observer(value) {
+    },
+    watch: {
+        value(value) {
             const children = this.getRelationNodes('../radio/index');
             children.forEach(child => {
                 child.setData({ value });
             });
-      }
         },
-    disabled: {
+        disabled(disabled) {
-      type: Boolean,
-      observer(disabled) {
             const children = this.getRelationNodes('../radio/index');
             children.forEach(child => {
-          child.setData({ disabled: disabled || children.data.disabled });
+                child.setData({ disabled: disabled || child.data.disabled });
             });
         }
     }
-  }
 });

dist/radio/index.js

@@ -1,14 +1,10 @@
 import { VantComponent } from '../common/component';
-
 VantComponent({
-  relations: {
+    relation: {
-    '../radio-group/index': {
+        name: 'radio-group',
         type: 'ancestor'
-    }
     },
-
     classes: ['icon-class', 'label-class'],
-
     props: {
         name: null,
         value: null,
@@ -16,7 +12,6 @@ VantComponent({
         labelDisabled: Boolean,
         labelPosition: String
     },
-
     computed: {
         iconClass() {
             const { disabled, name, value } = this.data;
@@ -27,19 +22,15 @@ VantComponent({
             });
         }
     },
-
     methods: {
         emitChange(value) {
-      const parent = this.getRelationNodes('../radio-group/index')[0];
+            const instance = this.getRelationNodes('../radio-group/index')[0] || this;
-      (parent || this).$emit('input', value);
+            instance.$emit('input', value);
-      (parent || this).$emit('change', value);
+            instance.$emit('change', value);
         },
-
         onChange(event) {
-      const { value } = event.detail;
+            this.emitChange(event.detail.value);
-      this.emitChange(value);
         },
-
         onClickLabel() {
             if (!this.data.disabled && !this.data.labelDisabled) {
                 this.emitChange(this.data.name);

dist/row/index.js

@@ -1,39 +1,34 @@
 import { VantComponent } from '../common/component';
-
 VantComponent({
-  relations: {
+    relation: {
-    '../col/index': {
+        name: 'col',
         type: 'descendant',
-
         linked(target) {
             if (this.data.gutter) {
                 target.setGutter(this.data.gutter);
             }
         }
-    }
     },
-
     props: {
-    gutter: {
+        gutter: Number
-      type: Number,
+    },
-      observer: 'setGutter'
+    watch: {
-    }
+        gutter: 'setGutter'
     },
-
     mounted() {
         if (this.data.gutter) {
             this.setGutter();
         }
     },
-
     methods: {
         setGutter() {
             const { gutter } = this.data;
             const margin = `-${Number(gutter) / 2}px`;
-      const style = gutter ? `margin-right: ${margin}; margin-left: ${margin};` : '';
+            const style = gutter
-
+                ? `margin-right: ${margin}; margin-left: ${margin};`
+                : '';
             this.setData({ style });
-      this.getRelationNodes('../col/index').forEach((col) => {
+            this.getRelationNodes('../col/index').forEach(col => {
                 col.setGutter(this.data.gutter);
             });
         }

dist/search/index.js

@@ -1,10 +1,7 @@
 import { VantComponent } from '../common/component';
-
 VantComponent({
     field: true,
-
     classes: ['cancel-class'],
-
     props: {
         focus: Boolean,
         disabled: Boolean,
@@ -21,27 +18,25 @@ VantComponent({
             value: -1
         }
     },
-
+    data: {
+        value: ''
+    },
     methods: {
         onChange(event) {
             this.setData({ value: event.detail });
             this.$emit('change', event.detail);
         },
-
         onCancel() {
             this.setData({ value: '' });
             this.$emit('cancel');
             this.$emit('change', '');
         },
-
         onSearch() {
             this.$emit('search', this.data.value);
         },
-
         onFocus() {
             this.$emit('focus');
         },
-
         onBlur() {
             this.$emit('blur');
         }

dist/slider/index.js

@@ -1,9 +1,7 @@
 import { VantComponent } from '../common/component';
 import { touch } from '../mixins/touch';
-
 VantComponent({
     mixins: [touch],
-
     props: {
         disabled: Boolean,
         max: {
@@ -27,56 +25,48 @@ VantComponent({
             value: '2px'
         }
     },
-
     created() {
         this.updateValue(this.data.value);
     },
-
     methods: {
         onTouchStart(event) {
-      if (this.data.disabled) return;
+            if (this.data.disabled)
-
+                return;
             this.touchStart(event);
             this.startValue = this.format(this.data.value);
         },
-
         onTouchMove(event) {
-      if (this.data.disabled) return;
+            if (this.data.disabled)
-
+                return;
             this.touchMove(event);
             this.getRect('.van-slider').then(rect => {
                 const diff = this.deltaX / rect.width * 100;
                 this.updateValue(this.startValue + diff);
             });
         },
-
         onTouchEnd() {
-      if (this.data.disabled) return;
+            if (this.data.disabled)
+                return;
             this.updateValue(this.data.value, true);
         },
-
         onClick(event) {
-      if (this.data.disabled) return;
+            if (this.data.disabled)
-
+                return;
             this.getRect(rect => {
                 const value = (event.detail.x - rect.left) / rect.width * 100;
                 this.updateValue(value, true);
             });
         },
-
         updateValue(value, end) {
             value = this.format(value);
-
             this.setData({
                 value,
                 barStyle: `width: ${value}%; height: ${this.data.barHeight};`
             });
-
             if (end) {
                 this.$emit('change', value);
             }
         },
-
         format(value) {
             const { max, min, step } = this.data;
             return Math.round(Math.max(min, Math.min(value, max)) / step) * step;

dist/stepper/index.js

@@ -1,18 +1,14 @@
 import { VantComponent } from '../common/component';
-
 // Note that the bitwise operators and shift operators operate on 32-bit ints
 // so in that case, the max safe integer is 2^31-1, or 2147483647
 const MAX = 2147483647;
-
 VantComponent({
     field: true,
-
     classes: [
         'input-class',
         'plus-class',
         'minus-class'
     ],
-
     props: {
         integer: Boolean,
         disabled: Boolean,
@@ -30,50 +26,44 @@ VantComponent({
             value: 1
         }
     },
-
+    data: {
+        value: 0
+    },
     created() {
         this.setData({
             value: this.range(this.data.value)
         });
     },
-
     methods: {
         // limit value range
         range(value) {
             return Math.max(Math.min(this.data.max, value), this.data.min);
         },
-
         onInput(event) {
             const { value = '' } = event.detail || {};
             this.triggerInput(value);
         },
-
         onChange(type) {
             if (this[`${type}Disabled`]) {
                 this.$emit('overlimit', type);
                 return;
             }
-
             const diff = type === 'minus' ? -this.data.step : +this.data.step;
             const value = Math.round((this.data.value + diff) * 100) / 100;
             this.triggerInput(this.range(value));
             this.$emit(type);
         },
-
         onBlur(event) {
             const value = this.range(this.data.value);
             this.triggerInput(value);
             this.$emit('blur', event);
         },
-
         onMinus() {
             this.onChange('minus');
         },
-
         onPlus() {
             this.onChange('plus');
         },
-
         triggerInput(value) {
             this.setData({ value });
             this.$emit('change', value);

dist/steps/index.js

@@ -1,16 +1,9 @@
 import { VantComponent } from '../common/component';
-
 VantComponent({
     props: {
         icon: String,
-    steps: {
+        steps: Array,
-      type: Array,
+        active: Number,
-      observer: 'formatSteps'
-    },
-    active: {
-      type: Number,
-      observer: 'formatSteps'
-    },
         direction: {
             type: String,
             value: 'horizontal'
@@ -20,11 +13,13 @@ VantComponent({
             value: '#06bf04'
         }
     },
-
+    watch: {
+        steps: 'formatSteps',
+        active: 'formatSteps'
+    },
     created() {
         this.formatSteps();
     },
-
     methods: {
         formatSteps() {
             const { steps } = this.data;
@@ -33,16 +28,14 @@ VantComponent({
             });
             this.setData({ steps });
         },
-
         getStatus(index) {
             const { active } = this.data;
-
             if (index < active) {
                 return 'finish';
-      } else if (index === active) {
+            }
+            else if (index === active) {
                 return 'process';
             }
-
             return '';
         }
     }

dist/submit-bar/index.js

@@ -1,12 +1,10 @@
 import { VantComponent } from '../common/component';
-
 VantComponent({
     classes: [
         'bar-class',
         'price-class',
         'button-class'
     ],
-
     props: {
         tip: [String, Boolean],
         type: Number,
@@ -24,22 +22,18 @@ VantComponent({
             value: 'danger'
         }
     },
-
     computed: {
         hasPrice() {
             return typeof this.data.price === 'number';
         },
-
         priceStr() {
             return (this.data.price / 100).toFixed(2);
         },
-
         tipStr() {
             const { tip } = this.data;
             return typeof tip === 'string' ? tip : '';
         }
     },
-
     methods: {
         onSubmit(event) {
             this.$emit('submit', event.detail);

dist/switch-cell/index.js

@@ -1,29 +1,25 @@
 import { VantComponent } from '../common/component';
-
 VantComponent({
     field: true,
-
     props: {
         title: String,
         border: Boolean,
+        checked: Boolean,
         loading: Boolean,
         disabled: Boolean,
-    checked: {
-      type: Boolean,
-      observer(value) {
-        this.setData({ value });
-      }
-    },
         size: {
             type: String,
             value: '26px'
         }
     },
-
+    watch: {
+        checked(value) {
+            this.setData({ value });
+        }
+    },
     created() {
         this.setData({ value: this.data.checked });
     },
-
     methods: {
         onChange(event) {
             this.$emit('change', event.detail);

dist/switch/index.js

@@ -1,29 +1,24 @@
 import { VantComponent } from '../common/component';
-
 VantComponent({
     field: true,
-
     classes: ['node-class'],
-
     props: {
+        checked: Boolean,
         loading: Boolean,
         disabled: Boolean,
-    checked: {
-      type: Boolean,
-      observer(value) {
-        this.setData({ value });
-      }
-    },
         size: {
             type: String,
             value: '30px'
         }
     },
-
+    watch: {
+        checked(value) {
+            this.setData({ value });
+        }
+    },
     created() {
         this.setData({ value: this.data.checked });
     },
-
     methods: {
         onClick() {
             if (!this.data.disabled && !this.data.loading) {

dist/tab/index.js

@@ -1,19 +1,25 @@
 import { VantComponent } from '../common/component';
-
 VantComponent({
+    relation: {
+        name: 'tabs',
+        type: 'ancestor'
+    },
     props: {
-    disabled: {
+        title: String,
-      type: Boolean,
+        disabled: Boolean
-      observer() {
+    },
+    data: {
+        inited: false,
+        active: false
+    },
+    watch: {
+        disabled() {
             const parent = this.getRelationNodes('../tabs/index')[0];
             if (parent) {
                 parent.updateTabs();
             }
-      }
         },
-    title: {
+        title() {
-      type: String,
-      observer() {
             const parent = this.getRelationNodes('../tabs/index')[0];
             if (parent) {
                 parent.setLine();
@@ -21,16 +27,4 @@ VantComponent({
             }
         }
     }
-  },
-
-  relations: {
-    '../tabs/index': {
-      type: 'ancestor'
-    }
-  },
-
-  data: {
-    inited: false,
-    active: false
-  }
 });

dist/tabbar-item/index.js

@@ -1,23 +1,18 @@
 import { VantComponent } from '../common/component';
-
 VantComponent({
     props: {
         info: null,
         icon: String,
         dot: Boolean
     },
-
+    relation: {
-  relations: {
+        name: 'tabbar',
-    '../tabbar/index': {
         type: 'ancestor'
-    }
     },
-
     data: {
         active: false,
         count: 0
     },
-
     methods: {
         onClick() {
             const parent = this.getRelationNodes('../tabbar/index')[0];
@@ -26,7 +21,6 @@ VantComponent({
             }
             this.$emit('click');
         },
-
         setActive(data) {
             const { active, count } = this.data;
             if (active !== data.active || count !== data.count) {

dist/tabbar/index.js

@@ -1,14 +1,23 @@
 import { VantComponent } from '../common/component';
-
 VantComponent({
-  props: {
+    relation: {
-    active: {
+        name: 'tabbar-item',
-      type: Number,
+        type: 'descendant',
-      observer(active) {
+        linked(target) {
-        this.setData({ currentActive: active });
+            this.data.items.push(target);
+            setTimeout(() => {
                 this.setActiveItem();
+            });
+        },
+        unlinked(target) {
+            this.data.items = this.data.items.filter(item => item !== target);
+            setTimeout(() => {
+                this.setActiveItem();
+            });
         }
     },
+    props: {
+        active: Number,
         fixed: {
             type: Boolean,
             value: true
@@ -18,36 +27,19 @@ VantComponent({
             value: 1
         }
     },
-
     data: {
         items: [],
         currentActive: -1
     },
-
+    watch: {
+        active(active) {
+            this.setData({ currentActive: active });
+            this.setActiveItem();
+        }
+    },
     created() {
         this.setData({ currentActive: this.data.active });
     },
-
-  relations: {
-    '../tabbar-item/index': {
-      type: 'descendant',
-
-      linked(target) {
-        this.data.items.push(target);
-        setTimeout(() => {
-          this.setActiveItem();
-        });
-      },
-
-      unlinked(target) {
-        this.data.items = this.data.items.filter(item => item !== target);
-        setTimeout(() => {
-          this.setActiveItem();
-        });
-      }
-    }
-  },
-
     methods: {
         setActiveItem() {
             this.data.items.forEach((item, index) => {
@@ -57,7 +49,6 @@ VantComponent({
                 });
             });
         },
-
         onChange(child) {
             const active = this.data.items.indexOf(child);
             if (active !== this.data.currentActive && active !== -1) {

dist/tabs/index.js

@@ -1,10 +1,8 @@
 import { VantComponent } from '../common/component';
-
 VantComponent({
-  relations: {
+    relation: {
-    '../tab/index': {
+        name: 'tab',
         type: 'descendant',
-
         linked(child) {
             this.data.tabs.push({
                 instance: child,
@@ -12,7 +10,6 @@ VantComponent({
             });
             this.updateTabs();
         },
-
         unlinked(child) {
             const tabs = this.data.tabs.filter(item => item.instance !== child);
             this.setData({
@@ -21,22 +18,13 @@ VantComponent({
             });
             this.setActiveTab();
         }
-    }
     },
-
     props: {
-    color: {
+        color: String,
-      type: String,
+        lineWidth: Number,
-      observer: 'setLine'
-    },
-    lineWidth: {
-      type: Number,
-      observer: 'setLine'
-    },
         active: {
             type: null,
-      value: 0,
+            value: 0
-      observer: 'setActiveTab'
         },
         type: {
             type: String,
@@ -52,26 +40,29 @@ VantComponent({
         },
         swipeThreshold: {
             type: Number,
-      value: 4,
+            value: 4
-      observer() {
-        this.setData({
-          scrollable: this.data.tabs.length > this.data.swipeThreshold
-        });
-      }
         }
     },
-
     data: {
         tabs: [],
         lineStyle: '',
-    scrollLeft: 0
+        scrollLeft: 0,
+        scrollable: false
+    },
+    watch: {
+        swipeThreshold() {
+            this.setData({
+                scrollable: this.data.tabs.length > this.data.swipeThreshold
+            });
+        },
+        color: 'setLine',
+        lineWidth: 'setLine',
+        active: 'setActiveTab'
     },
-
     mounted() {
         this.setLine();
         this.scrollIntoView();
     },
-
     methods: {
         updateTabs() {
             const { tabs } = this.data;
@@ -81,24 +72,22 @@ VantComponent({
             });
             this.setActiveTab();
         },
-
         trigger(eventName, index) {
             this.$emit(eventName, {
                 index,
                 title: this.data.tabs[index].data.title
             });
         },
-
         onTap(event) {
             const { index } = event.currentTarget.dataset;
             if (this.data.tabs[index].data.disabled) {
                 this.trigger('disabled', index);
-      } else {
+            }
+            else {
                 this.trigger('click', index);
                 this.setActive(index);
             }
         },
-
         setActive(active) {
             if (active !== this.data.active) {
                 this.trigger('change', active);
@@ -106,12 +95,10 @@ VantComponent({
                 this.setActiveTab();
             }
         },
-
         setLine() {
             if (this.data.type !== 'line') {
                 return;
             }
-
             this.getRect('.van-tab', true).then(rects => {
                 const rect = rects[this.data.active];
                 const width = this.data.lineWidth || rect.width;
@@ -119,7 +106,6 @@ VantComponent({
                     .slice(0, this.data.active)
                     .reduce((prev, curr) => prev + curr.width, 0);
                 left += (rect.width - width) / 2;
-
                 this.setData({
                     lineStyle: `
             width: ${width}px;
@@ -130,39 +116,32 @@ VantComponent({
                 });
             });
         },
-
         setActiveTab() {
             this.data.tabs.forEach((item, index) => {
                 const data = {
                     active: index === this.data.active
                 };
-
                 if (data.active) {
                     data.inited = true;
                 }
-
                 if (data.active !== item.instance.data.active) {
                     item.instance.setData(data);
                 }
             });
-
             this.setLine();
             this.scrollIntoView();
         },
-
         // scroll active tab into view
         scrollIntoView(immediate) {
             if (!this.data.scrollable) {
                 return;
             }
-
             this.getRect('.van-tab', true).then(tabRects => {
                 const tabRect = tabRects[this.data.active];
                 const offsetLeft = tabRects
                     .slice(0, this.data.active)
                     .reduce((prev, curr) => prev + curr.width, 0);
                 const tabWidth = tabRect.width;
-
                 this.getRect('.van-tabs__nav').then(navRect => {
                     const navWidth = navRect.width;
                     this.setData({

dist/tag/index.js

@@ -1,5 +1,4 @@
 import { VantComponent } from '../common/component';
-
 VantComponent({
     props: {
         type: String,

dist/toast/index.js

@@ -1,5 +1,4 @@
 import { VantComponent } from '../common/component';
-
 VantComponent({
     props: {
         show: Boolean,
@@ -23,14 +22,12 @@ VantComponent({
             value: 'middle'
         }
     },
-
     methods: {
         clear() {
             this.setData({
                 show: false
             });
         },
-
         // for prevent touchmove
         noop() { }
     }

dist/toast/toast.js

@@ -1,5 +1,4 @@
 import { isObj } from '../common/utils';
-
 const defaultOptions = {
     type: 'text',
     mask: false,
@@ -12,61 +11,42 @@ const defaultOptions = {
     loadingType: 'circular',
     selector: '#van-toast'
 };
-
 let queue = [];
-let currentOptions = { ...defaultOptions };
+let currentOptions = Object.assign({}, defaultOptions);
-
 function parseOptions(message) {
     return isObj(message) ? message : { message };
 }
-
+const Toast = (options = {}) => {
-function Toast(options = {}) {
+    options = Object.assign({}, currentOptions, parseOptions(options));
-  options = {
-    ...currentOptions,
-    ...parseOptions(options)
-  };
-
     const pages = getCurrentPages();
     const ctx = pages[pages.length - 1];
-
     const toast = ctx.selectComponent(options.selector);
     delete options.selector;
-
     queue.push(toast);
     toast.setData(options);
     clearTimeout(toast.timer);
-
     if (options.duration > 0) {
         toast.timer = setTimeout(() => {
             toast.clear();
             queue = queue.filter(item => item !== toast);
         }, options.duration);
     }
-
     return toast;
 };
-
+const createMethod = type => options => Toast(Object.assign({ type }, parseOptions(options)));
-const createMethod = type => options => Toast({
-  type, ...parseOptions(options)
-});
-
 ['loading', 'success', 'fail'].forEach(method => {
     Toast[method] = createMethod(method);
 });
-
+Toast.clear = () => {
-Toast.clear = all => {
     queue.forEach(toast => {
         toast.clear();
     });
     queue = [];
 };
-
 Toast.setDefaultOptions = options => {
     Object.assign(currentOptions, options);
 };
-
 Toast.resetDefaultOptions = () => {
-  currentOptions = { ...defaultOptions };
+    currentOptions = Object.assign({}, defaultOptions);
 };
-
 export default Toast;

dist/transition/index.js

@@ -1,9 +1,7 @@
 import { VantComponent } from '../common/component';
 import { transition } from '../mixins/transition';
-
 VantComponent({
     mixins: [transition(true)],
-
     props: {
         name: {
             type: String,

dist/tree-select/index.js

@@ -1,20 +1,11 @@
 import { VantComponent } from '../common/component';
-
 const ITEM_HEIGHT = 44;
-
 VantComponent({
     props: {
-    items: {
+        items: Array,
-      type: Array,
-      observer() {
-        this.updateSubItems();
-        this.updateMainHeight();
-      }
-    },
         mainActiveIndex: {
             type: Number,
-      value: 0,
+            value: 0
-      observer: 'updateSubItems'
         },
         activeId: {
             type: Number,
@@ -22,51 +13,51 @@ VantComponent({
         },
         maxHeight: {
             type: Number,
-      value: 300,
+            value: 300
-      observer() {
-        this.updateItemHeight();
-        this.updateMainHeight();
-      }
         }
     },
-
     data: {
         subItems: [],
         mainHeight: 0,
         itemHeight: 0
     },
-
+    watch: {
+        items() {
+            this.updateSubItems();
+            this.updateMainHeight();
+        },
+        maxHeight() {
+            this.updateItemHeight();
+            this.updateMainHeight();
+        },
+        mainActiveIndex: 'updateSubItems'
+    },
     methods: {
         // 当一个子项被选择时
         onSelectItem(event) {
             this.$emit('click-item', event.currentTarget.dataset.item);
         },
-
         // 当一个导航被点击时
         onClickNav(event) {
             const { index } = event.currentTarget.dataset;
             this.$emit('click-nav', { index });
         },
-
         // 更新子项列表
         updateSubItems() {
             const selectedItem = this.data.items[this.data.mainActiveIndex] || {};
-
             this.setData({ subItems: selectedItem.children || [] });
-
             this.updateItemHeight();
         },
-
         // 更新组件整体高度，根据最大高度和当前组件需要展示的高度来决定
         updateMainHeight() {
             const maxHeight = Math.max(this.data.items.length * ITEM_HEIGHT, this.data.subItems.length * ITEM_HEIGHT);
-
             this.setData({ mainHeight: Math.min(maxHeight, this.data.maxHeight) });
         },
-
         // 更新子项列表高度，根据可展示的最大高度和当前子项列表的高度决定
         updateItemHeight() {
-      this.setData({ itemHeight: Math.min(this.data.subItems.length * ITEM_HEIGHT, this.data.maxHeight) });
+            this.setData({
+                itemHeight: Math.min(this.data.subItems.length * ITEM_HEIGHT, this.data.maxHeight)
+            });
         }
     }
 });