[build] 0.5.15

dist/datetime-picker/index.js

@@ -66,23 +66,29 @@ VantComponent({
         columns: []
     },
     watch: {
-        value(val) {
+        value: 'updateValue',
+        type: 'updateValue',
+        minDate: 'updateValue',
+        maxDate: 'updateValue',
+        minHour: 'updateValue',
+        maxHour: 'updateValue',
+        minMinute: 'updateValue',
+        maxMinute: 'updateValue'
+    },
+    methods: {
+        updateValue() {
             const { data } = this;
-            val = this.correctValue(val);
+            const val = this.correctValue(this.data.value);
             const isEqual = val === data.innerValue;
             if (!isEqual) {
                 this.updateColumnValue(val).then(() => {
                     this.$emit('input', val);
                 });
             }
+            else {
+                this.updateColumns();
+            }
         },
-        type: 'updateColumns',
-        minHour: 'updateColumns',
-        maxHour: 'updateColumns',
-        minMinute: 'updateColumns',
-        maxMinute: 'updateColumns'
-    },
-    methods: {
         getPicker() {
             if (this.picker == null) {
                 const picker = (this.picker = this.selectComponent('.van-datetime-picker'));

dist/mixins/transition.js

@@ -5,7 +5,7 @@ const getClassNames = (name) => ({
     leave: `van-${name}-leave van-${name}-leave-active leave-class leave-active-class`,
     'leave-to': `van-${name}-leave-to van-${name}-leave-active leave-to-class leave-active-class`
 });
-const nextTick = () => new Promise(resolve => setTimeout(resolve, 1000 / 20));
+const nextTick = () => new Promise(resolve => setTimeout(resolve, 1000 / 30));
 export const transition = function (showDefaultValue) {
     return Behavior({
         properties: {
@@ -34,13 +34,13 @@ export const transition = function (showDefaultValue) {
         },
         attached() {
             if (this.data.show) {
-                this.show();
+                this.enter();
             }
         },
         methods: {
             observeShow(value) {
                 if (value) {
-                    this.show();
+                    this.enter();
                 }
                 else {
                     this.leave();
@@ -51,36 +51,57 @@ export const transition = function (showDefaultValue) {
                     classNames: getClassNames(name)
                 });
             },
-            show() {
+            enter() {
                 const { classNames, duration } = this.data;
                 const currentDuration = isObj(duration) ? duration.leave : duration;
+                this.status = 'enter';
                 Promise.resolve()
                     .then(nextTick)
-                    .then(() => this.set({
+                    .then(() => {
-                    inited: true,
+                    this.checkStatus('enter');
-                    display: true,
+                    this.set({
-                    classes: classNames.enter,
+                        inited: true,
-                    currentDuration
+                        display: true,
-                }))
+                        classes: classNames.enter,
+                        currentDuration
+                    });
+                })
                     .then(nextTick)
-                    .then(() => this.set({
+                    .then(() => {
-                    classes: classNames['enter-to']
+                    this.checkStatus('enter');
-                }));
+                    this.set({
+                        classes: classNames['enter-to']
+                    });
+                })
+                    .catch(() => { });
             },
             leave() {
                 const { classNames, duration } = this.data;
                 const currentDuration = isObj(duration) ? duration.leave : duration;
+                this.status = 'leave';
                 Promise.resolve()
                     .then(nextTick)
-                    .then(() => this.set({
+                    .then(() => {
-                    classes: classNames.leave,
+                    this.checkStatus('leave');
-                    currentDuration
+                    this.set({
-                }))
+                        classes: classNames.leave,
+                        currentDuration
+                    });
+                })
                     .then(() => setTimeout(() => this.onTransitionEnd(), currentDuration))
                     .then(nextTick)
-                    .then(() => this.set({
+                    .then(() => {
-                    classes: classNames['leave-to']
+                    this.checkStatus('leave');
-                }));
+                    this.set({
+                        classes: classNames['leave-to']
+                    });
+                })
+                    .catch(() => { });
+            },
+            checkStatus(status) {
+                if (status !== this.status) {
+                    throw new Error(`incongruent status: ${status}`);
+                }
             },
             onTransitionEnd() {
                 if (!this.data.show) {

dist/popup/index.wxml

@@ -1,7 +1,7 @@
 <wxs src="../wxs/utils.wxs" module="utils" />
 
 <van-overlay
-  wx:if="{{ inited && overlay }}"
+  wx:if="{{ overlay }}"
   mask
   show="{{ show }}"
   z-index="{{ zIndex }}"

dist/progress/index.js

@@ -18,48 +18,5 @@ VantComponent({
             type: String,
             value: '#fff'
         }
-    },
-    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.getWidth();
-    },
-    methods: {
-        getCurrentColor() {
-            return this.data.inactive ? '#cacaca' : this.data.color;
-        },
-        getWidth() {
-            this.getRect('.van-progress').then(rect => {
-                this.set({
-                    progressWidth: rect.width
-                });
-            });
-            this.getRect('.van-progress__pivot').then(rect => {
-                this.set({
-                    pivotWidth: rect.width || 0
-                });
-            });
-        }
     }
 });

dist/progress/index.wxml

@@ -1,14 +1,16 @@
+<wxs src="./index.wxs" module="getters" />
+
 <view class="van-progress custom-class">
   <view
-    class="van-progress__portion {{ showPivot && text ? 'van-progress__portion--with-pivot' : '' }}"
+    class="van-progress__portion"
-    style="{{ portionStyle }}"
+    style="width: {{ percentage }}%; background: {{ inactive ? '#cacaca' : color }}"
   >
     <view
-      wx:if="{{ showPivot && text }}"
+      wx:if="{{ showPivot && getters.text(pivotText, percentage) }}"
-      style="{{ pivotStyle }}"
+      style="color: {{ textColor }}; background: {{ pivotColor ? pivotColor : inactive ? '#cacaca' : color }}"
       class="van-progress__pivot"
     >
-      {{ text }}
+      {{ getters.text(pivotText, percentage) }}
     </view>
   </view>
 </view>

dist/progress/index.wxs

@@ -0,0 +1,5 @@
+module.exports = {
+  text: function(pivotText, percentage) {
+    return pivotText || percentage + '%';
+  }
+};

dist/progress/index.wxss

@@ -1 +1 @@
-@import '../common/index.wxss';.van-progress{height:4px;position:relative;border-radius:4px;background:#e5e5e5}.van-progress__portion{left:0;height:100%;position:absolute;border-radius:inherit}.van-progress__portion--with-pivot{border-top-right-radius:0;border-bottom-right-radius:0}.van-progress__pivot{top:50%;right:0;min-width:2em;padding:0 5px;font-size:10px;position:absolute;line-height:1.6;text-align:center;border-radius:1em;word-break:keep-all;box-sizing:border-box;background-color:#e5e5e5;-webkit-transform:translate(100%,-50%);transform:translate(100%,-50%)}
+@import '../common/index.wxss';.van-progress{position:relative;height:4px;background:#e5e5e5;border-radius:4px}.van-progress__portion{position:absolute;left:0;height:100%;border-radius:inherit}.van-progress__pivot{position:absolute;top:50%;right:0;min-width:2em;padding:0 5px;font-size:10px;line-height:1.6;text-align:center;word-break:keep-all;background-color:#e5e5e5;border-radius:1em;-webkit-transform:translateY(-50%);transform:translateY(-50%);box-sizing:border-box}

dist/radio/index.wxml

@@ -7,7 +7,7 @@
       wx:else
       name="success"
       class="{{ utils.bem('radio__icon', [shape, { disabled, checked: value === name }]) }}"
-      style="{{ checkedColor && value && !disabled ? 'border-color:' + checkedColor + '; background-color:' + checkedColor : '' }}"
+      style="{{ checkedColor && !disabled && value === name ? 'border-color:' + checkedColor + '; background-color:' + checkedColor : '' }}"
       custom-class="icon-class"
       custom-style="line-height: 20px;"
     />

dist/submit-bar/index.js

@@ -8,10 +8,16 @@ VantComponent({
         'button-class'
     ],
     props: {
-        tip: null,
+        tip: {
+            type: null,
+            observer: 'updateTip'
+        },
         tipIcon: String,
         type: Number,
-        price: null,
+        price: {
+            type: null,
+            observer: 'updatePrice'
+        },
         label: String,
         loading: Boolean,
         disabled: Boolean,
@@ -26,22 +32,22 @@ VantComponent({
         },
         decimalLength: {
             type: Number,
-            value: 2
+            value: 2,
-        }
+            observer: 'updatePrice'
-    },
-    computed: {
-        hasPrice() {
-            return typeof this.data.price === 'number';
         },
-        priceStr() {
+        suffixLabel: String
-            return (this.data.price / 100).toFixed(this.data.decimalLength);
-        },
-        tipStr() {
-            const { tip } = this.data;
-            return typeof tip === 'string' ? tip : '';
-        }
     },
     methods: {
+        updatePrice() {
+            const { price, decimalLength } = this.data;
+            this.set({
+                hasPrice: typeof price === 'number',
+                priceStr: (price / 100).toFixed(decimalLength)
+            });
+        },
+        updateTip() {
+            this.set({ hasTip: typeof this.data.tip === 'string' });
+        },
         onSubmit(event) {
             this.$emit('submit', event.detail);
         }

dist/submit-bar/index.wxml

@@ -3,28 +3,28 @@
 <view class="van-submit-bar custom-class">
   <slot name="top" />
 
-  <view wx:if="{{ tip }}" class="van-submit-bar__tip">
+  <view class="van-submit-bar__tip">
     <van-icon
       wx:if="{{ tipIcon }}"
       size="12px"
       name="{{ tipIcon }}"
       custom-class="van-submit-bar__tip-icon"
     />
-    <view wx:if="{{ tipStr }}" class="van-submit-bar__tip-text">
+    <view wx:if="{{ hasTip }}" class="van-submit-bar__tip-text">
-      {{ tipStr }}
+      {{ tip }}
     </view>
     <slot name="tip" />
   </view>
 
   <view class="bar-class {{ utils.bem('submit-bar__bar', { safe: safeAreaInsetBottom && isIPhoneX }) }}">
     <slot />
-    <view class="van-submit-bar__text">
+    <view wx:if="{{ hasPrice }}" class="van-submit-bar__text">
-      <block wx:if="{{ hasPrice }}">
+      <text>{{ label || '合计：' }}</text>
-        <text>{{ label || '合计：' }}</text>
+      <text class="van-submit-bar__price price-class">
-        <text class="van-submit-bar__price price-class">
+        <text class="van-submit-bar__currency">{{ currency }} </text>
-          <text class="van-submit-bar__currency">{{ currency }}</text> {{ priceStr }}
+        <text>{{ priceStr }}</text>
-        </text>
+      </text>
-      </block>
+      <text class="van-submit-bar__suffix-label">{{ suffixLabel }}</text>
     </view>
     <van-button
       square

dist/submit-bar/index.wxss

@@ -1 +1 @@
-@import '../common/index.wxss';.van-submit-bar{z-index:100;position:fixed;bottom:0;left:0;width:100%;-webkit-user-select:none;user-select:none}.van-submit-bar__tip{padding:10px;color:#f56723;font-size:12px;line-height:18px;background-color:#fff7cc}.van-submit-bar__tip-icon{width:12px;height:12px;margin-right:4px;vertical-align:middle}.van-submit-bar__tip-text{display:inline;vertical-align:middle}.van-submit-bar__bar{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;height:50px;background-color:#fff;font-size:14px}.van-submit-bar__bar--safe{padding-bottom:34px}.van-submit-bar__text{-webkit-flex:1;flex:1;color:#333;font-weight:500;text-align:right}.van-submit-bar__price{color:#f44;font-size:18px;padding-right:12px}.van-submit-bar__currency{font-size:14px}.van-submit-bar__button{width:110px}
+@import '../common/index.wxss';.van-submit-bar{position:fixed;bottom:0;left:0;z-index:100;width:100%;-webkit-user-select:none;user-select:none}.van-submit-bar__tip{padding:10px;font-size:12px;line-height:1.5;color:#f56723;background-color:#fff7cc}.van-submit-bar__tip:empty{display:none}.van-submit-bar__tip-icon{width:12px;height:12px;margin-right:4px;vertical-align:middle}.van-submit-bar__tip-text{display:inline;vertical-align:middle}.van-submit-bar__bar{display:-webkit-flex;display:flex;height:50px;font-size:14px;background-color:#fff;-webkit-align-items:center;align-items:center;-webkit-justify-content:flex-end;justify-content:flex-end}.van-submit-bar__bar--safe{padding-bottom:34px}.van-submit-bar__text{padding-right:12px;font-weight:500;color:#333;-webkit-flex:1;flex:1;text-align:right}.van-submit-bar__price{font-size:18px;color:#f44}.van-submit-bar__currency{font-size:14px}.van-submit-bar__suffix-label{margin-left:5px}.van-submit-bar__button{width:110px}

dist/tabbar-item/index.js

@@ -3,14 +3,14 @@ VantComponent({
     props: {
         info: null,
         icon: String,
-        dot: Boolean
+        dot: Boolean,
+        name: {
+            type: [String, Number]
+        }
     },
     relation: {
         name: 'tabbar',
-        type: 'ancestor',
+        type: 'ancestor'
-        linked(target) {
-            this.parent = target;
-        }
     },
     data: {
         active: false
@@ -22,11 +22,28 @@ VantComponent({
             }
             this.$emit('click');
         },
-        setActive({ active, color }) {
+        updateFromParent() {
-            if (this.data.active !== active) {
+            const { parent } = this;
-                return this.set({ active, color });
+            if (!parent) {
+                return;
             }
-            return Promise.resolve();
+            const index = parent.children.indexOf(this);
+            const parentData = parent.data;
+            const { data } = this;
+            const active = (data.name || index) === parentData.active;
+            const patch = {};
+            if (active !== data.active) {
+                patch.active = active;
+            }
+            if (parentData.activeColor !== data.activeColor) {
+                patch.activeColor = parentData.activeColor;
+            }
+            if (parentData.inactiveColor !== data.inactiveColor) {
+                patch.inactiveColor = parentData.inactiveColor;
+            }
+            return Object.keys(patch).length > 0
+                ? this.set(patch)
+                : Promise.resolve();
         }
     }
 });

dist/tabbar-item/index.wxml

@@ -2,7 +2,7 @@
 
 <view
   class="{{ utils.bem('tabbar-item', { active }) }} custom-class"
-  style="{{ active && color ? 'color: ' + color : '' }}"
+  style="color: {{ active ? activeColor : inactiveColor }}"
   bind:tap="onClick"
 >
   <view class="{{ utils.bem('tabbar-item__icon', { dot }) }}">

dist/tabbar/index.js

@@ -6,19 +6,28 @@ VantComponent({
         name: 'tabbar-item',
         type: 'descendant',
         linked(target) {
-            this.children = this.children || [];
             this.children.push(target);
-            this.setActiveItem();
+            target.parent = this;
+            target.updateFromParent();
         },
         unlinked(target) {
-            this.children = this.children || [];
+            this.children = this.children.filter((item) => item !== target);
-            this.children = this.children.filter(item => item !== target);
+            this.updateChildren();
-            this.setActiveItem();
         }
     },
     props: {
-        active: Number,
+        active: {
-        activeColor: String,
+            type: [Number, String],
+            observer: 'updateChildren'
+        },
+        activeColor: {
+            type: String,
+            observer: 'updateChildren'
+        },
+        inactiveColor: {
+            type: String,
+            observer: 'updateChildren'
+        },
         fixed: {
             type: Boolean,
             value: true
@@ -32,32 +41,22 @@ VantComponent({
             value: 1
         }
     },
-    watch: {
+    beforeCreate() {
-        active(active) {
+        this.children = [];
-            this.currentActive = active;
-            this.setActiveItem();
-        }
-    },
-    created() {
-        this.currentActive = this.data.active;
     },
     methods: {
-        setActiveItem() {
+        updateChildren() {
-            if (!Array.isArray(this.children) || !this.children.length) {
+            const { children } = this;
+            if (!Array.isArray(children) || !children.length) {
                 return Promise.resolve();
             }
-            return Promise.all(this.children.map((item, index) => item.setActive({
+            return Promise.all(children.map((child) => child.updateFromParent()));
-                active: index === this.currentActive,
-                color: this.data.activeColor
-            })));
         },
         onChange(child) {
-            const active = (this.children || []).indexOf(child);
+            const index = this.children.indexOf(child);
-            if (active !== this.currentActive && active !== -1) {
+            const active = child.data.name || index;
-                this.currentActive = active;
+            if (active !== this.data.active) {
-                this.setActiveItem().then(() => {
+                this.$emit('change', active);
-                    this.$emit('change', active);
-                });
             }
         }
     }

lib/common/component.js

@@ -10,8 +10,8 @@ function mapKeys(source, target, map) {
     });
 }
 function VantComponent(vantOptions) {
-    if (vantOptions === void 0) { vantOptions = {}; }
     var _a;
+    if (vantOptions === void 0) { vantOptions = {}; }
     var options = {};
     mapKeys(vantOptions, options, {
         data: 'data',

lib/datetime-picker/index.js

@@ -79,24 +79,30 @@ component_1.VantComponent({
         columns: []
     },
     watch: {
-        value: function (val) {
+        value: 'updateValue',
+        type: 'updateValue',
+        minDate: 'updateValue',
+        maxDate: 'updateValue',
+        minHour: 'updateValue',
+        maxHour: 'updateValue',
+        minMinute: 'updateValue',
+        maxMinute: 'updateValue'
+    },
+    methods: {
+        updateValue: function () {
             var _this = this;
             var data = this.data;
-            val = this.correctValue(val);
+            var val = this.correctValue(this.data.value);
             var isEqual = val === data.innerValue;
             if (!isEqual) {
                 this.updateColumnValue(val).then(function () {
                     _this.$emit('input', val);
                 });
             }
+            else {
+                this.updateColumns();
+            }
         },
-        type: 'updateColumns',
-        minHour: 'updateColumns',
-        maxHour: 'updateColumns',
-        minMinute: 'updateColumns',
-        maxMinute: 'updateColumns'
-    },
-    methods: {
         getPicker: function () {
             if (this.picker == null) {
                 var picker_1 = (this.picker = this.selectComponent('.van-datetime-picker'));

lib/mixins/transition.js

@@ -7,7 +7,7 @@ var getClassNames = function (name) { return ({
     leave: "van-" + name + "-leave van-" + name + "-leave-active leave-class leave-active-class",
     'leave-to': "van-" + name + "-leave-to van-" + name + "-leave-active leave-to-class leave-active-class"
 }); };
-var nextTick = function () { return new Promise(function (resolve) { return setTimeout(resolve, 1000 / 20); }); };
+var nextTick = function () { return new Promise(function (resolve) { return setTimeout(resolve, 1000 / 30); }); };
 exports.transition = function (showDefaultValue) {
     return Behavior({
         properties: {
@@ -36,13 +36,13 @@ exports.transition = function (showDefaultValue) {
         },
         attached: function () {
             if (this.data.show) {
-                this.show();
+                this.enter();
             }
         },
         methods: {
             observeShow: function (value) {
                 if (value) {
-                    this.show();
+                    this.enter();
                 }
                 else {
                     this.leave();
@@ -53,14 +53,16 @@ exports.transition = function (showDefaultValue) {
                     classNames: getClassNames(name)
                 });
             },
-            show: function () {
+            enter: function () {
                 var _this = this;
                 var _a = this.data, classNames = _a.classNames, duration = _a.duration;
                 var currentDuration = utils_1.isObj(duration) ? duration.leave : duration;
+                this.status = 'enter';
                 Promise.resolve()
                     .then(nextTick)
                     .then(function () {
-                    return _this.set({
+                    _this.checkStatus('enter');
+                    _this.set({
                         inited: true,
                         display: true,
                         classes: classNames.enter,
@@ -69,19 +71,23 @@ exports.transition = function (showDefaultValue) {
                 })
                     .then(nextTick)
                     .then(function () {
-                    return _this.set({
+                    _this.checkStatus('enter');
+                    _this.set({
                         classes: classNames['enter-to']
                     });
-                });
+                })
+                    .catch(function () { });
             },
             leave: function () {
                 var _this = this;
                 var _a = this.data, classNames = _a.classNames, duration = _a.duration;
                 var currentDuration = utils_1.isObj(duration) ? duration.leave : duration;
+                this.status = 'leave';
                 Promise.resolve()
                     .then(nextTick)
                     .then(function () {
-                    return _this.set({
+                    _this.checkStatus('leave');
+                    _this.set({
                         classes: classNames.leave,
                         currentDuration: currentDuration
                     });
@@ -89,10 +95,17 @@ exports.transition = function (showDefaultValue) {
                     .then(function () { return setTimeout(function () { return _this.onTransitionEnd(); }, currentDuration); })
                     .then(nextTick)
                     .then(function () {
-                    return _this.set({
+                    _this.checkStatus('leave');
+                    _this.set({
                         classes: classNames['leave-to']
                     });
-                });
+                })
+                    .catch(function () { });
+            },
+            checkStatus: function (status) {
+                if (status !== this.status) {
+                    throw new Error("incongruent status: " + status);
+                }
             },
             onTransitionEnd: function () {
                 if (!this.data.show) {

lib/popup/index.wxml

@@ -1,7 +1,7 @@
 <wxs src="../wxs/utils.wxs" module="utils" />
 
 <van-overlay
-  wx:if="{{ inited && overlay }}"
+  wx:if="{{ overlay }}"
   mask
   show="{{ show }}"
   z-index="{{ zIndex }}"

lib/progress/index.js

@@ -20,49 +20,5 @@ component_1.VantComponent({
             type: String,
             value: '#fff'
         }
-    },
-    data: {
-        pivotWidth: 0,
-        progressWidth: 0
-    },
-    watch: {
-        pivotText: 'getWidth',
-        showPivot: 'getWidth'
-    },
-    computed: {
-        portionStyle: function () {
-            var width = (this.data.progressWidth - this.data.pivotWidth) * this.data.percentage / 100 + 'px';
-            var background = this.getCurrentColor();
-            return "width: " + width + "; background: " + background + "; ";
-        },
-        pivotStyle: function () {
-            var color = this.data.textColor;
-            var background = this.data.pivotColor || this.getCurrentColor();
-            return "color: " + color + "; background: " + background;
-        },
-        text: function () {
-            return this.data.pivotText || this.data.percentage + '%';
-        }
-    },
-    mounted: function () {
-        this.getWidth();
-    },
-    methods: {
-        getCurrentColor: function () {
-            return this.data.inactive ? '#cacaca' : this.data.color;
-        },
-        getWidth: function () {
-            var _this = this;
-            this.getRect('.van-progress').then(function (rect) {
-                _this.set({
-                    progressWidth: rect.width
-                });
-            });
-            this.getRect('.van-progress__pivot').then(function (rect) {
-                _this.set({
-                    pivotWidth: rect.width || 0
-                });
-            });
-        }
     }
 });

lib/progress/index.wxml

@@ -1,14 +1,16 @@
+<wxs src="./index.wxs" module="getters" />
+
 <view class="van-progress custom-class">
   <view
-    class="van-progress__portion {{ showPivot && text ? 'van-progress__portion--with-pivot' : '' }}"
+    class="van-progress__portion"
-    style="{{ portionStyle }}"
+    style="width: {{ percentage }}%; background: {{ inactive ? '#cacaca' : color }}"
   >
     <view
-      wx:if="{{ showPivot && text }}"
+      wx:if="{{ showPivot && getters.text(pivotText, percentage) }}"
-      style="{{ pivotStyle }}"
+      style="color: {{ textColor }}; background: {{ pivotColor ? pivotColor : inactive ? '#cacaca' : color }}"
       class="van-progress__pivot"
     >
-      {{ text }}
+      {{ getters.text(pivotText, percentage) }}
     </view>
   </view>
 </view>

lib/progress/index.wxs

@@ -0,0 +1,5 @@
+module.exports = {
+  text: function(pivotText, percentage) {
+    return pivotText || percentage + '%';
+  }
+};

lib/progress/index.wxss

@@ -1 +1 @@
-@import '../common/index.wxss';.van-progress{height:4px;position:relative;border-radius:4px;background:#e5e5e5}.van-progress__portion{left:0;height:100%;position:absolute;border-radius:inherit}.van-progress__portion--with-pivot{border-top-right-radius:0;border-bottom-right-radius:0}.van-progress__pivot{top:50%;right:0;min-width:2em;padding:0 5px;font-size:10px;position:absolute;line-height:1.6;text-align:center;border-radius:1em;word-break:keep-all;box-sizing:border-box;background-color:#e5e5e5;-webkit-transform:translate(100%,-50%);transform:translate(100%,-50%)}
+@import '../common/index.wxss';.van-progress{position:relative;height:4px;background:#e5e5e5;border-radius:4px}.van-progress__portion{position:absolute;left:0;height:100%;border-radius:inherit}.van-progress__pivot{position:absolute;top:50%;right:0;min-width:2em;padding:0 5px;font-size:10px;line-height:1.6;text-align:center;word-break:keep-all;background-color:#e5e5e5;border-radius:1em;-webkit-transform:translateY(-50%);transform:translateY(-50%);box-sizing:border-box}

lib/radio/index.wxml

@@ -7,7 +7,7 @@
       wx:else
       name="success"
       class="{{ utils.bem('radio__icon', [shape, { disabled, checked: value === name }]) }}"
-      style="{{ checkedColor && value && !disabled ? 'border-color:' + checkedColor + '; background-color:' + checkedColor : '' }}"
+      style="{{ checkedColor && !disabled && value === name ? 'border-color:' + checkedColor + '; background-color:' + checkedColor : '' }}"
       custom-class="icon-class"
       custom-style="line-height: 20px;"
     />

lib/submit-bar/index.js

@@ -10,10 +10,16 @@ component_1.VantComponent({
         'button-class'
     ],
     props: {
-        tip: null,
+        tip: {
+            type: null,
+            observer: 'updateTip'
+        },
         tipIcon: String,
         type: Number,
-        price: null,
+        price: {
+            type: null,
+            observer: 'updatePrice'
+        },
         label: String,
         loading: Boolean,
         disabled: Boolean,
@@ -28,22 +34,22 @@ component_1.VantComponent({
         },
         decimalLength: {
             type: Number,
-            value: 2
+            value: 2,
-        }
+            observer: 'updatePrice'
-    },
-    computed: {
-        hasPrice: function () {
-            return typeof this.data.price === 'number';
         },
-        priceStr: function () {
+        suffixLabel: String
-            return (this.data.price / 100).toFixed(this.data.decimalLength);
-        },
-        tipStr: function () {
-            var tip = this.data.tip;
-            return typeof tip === 'string' ? tip : '';
-        }
     },
     methods: {
+        updatePrice: function () {
+            var _a = this.data, price = _a.price, decimalLength = _a.decimalLength;
+            this.set({
+                hasPrice: typeof price === 'number',
+                priceStr: (price / 100).toFixed(decimalLength)
+            });
+        },
+        updateTip: function () {
+            this.set({ hasTip: typeof this.data.tip === 'string' });
+        },
         onSubmit: function (event) {
             this.$emit('submit', event.detail);
         }

lib/submit-bar/index.wxml

@@ -3,28 +3,28 @@
 <view class="van-submit-bar custom-class">
   <slot name="top" />
 
-  <view wx:if="{{ tip }}" class="van-submit-bar__tip">
+  <view class="van-submit-bar__tip">
     <van-icon
       wx:if="{{ tipIcon }}"
       size="12px"
       name="{{ tipIcon }}"
       custom-class="van-submit-bar__tip-icon"
     />
-    <view wx:if="{{ tipStr }}" class="van-submit-bar__tip-text">
+    <view wx:if="{{ hasTip }}" class="van-submit-bar__tip-text">
-      {{ tipStr }}
+      {{ tip }}
     </view>
     <slot name="tip" />
   </view>
 
   <view class="bar-class {{ utils.bem('submit-bar__bar', { safe: safeAreaInsetBottom && isIPhoneX }) }}">
     <slot />
-    <view class="van-submit-bar__text">
+    <view wx:if="{{ hasPrice }}" class="van-submit-bar__text">
-      <block wx:if="{{ hasPrice }}">
+      <text>{{ label || '合计：' }}</text>
-        <text>{{ label || '合计：' }}</text>
+      <text class="van-submit-bar__price price-class">
-        <text class="van-submit-bar__price price-class">
+        <text class="van-submit-bar__currency">{{ currency }} </text>
-          <text class="van-submit-bar__currency">{{ currency }}</text> {{ priceStr }}
+        <text>{{ priceStr }}</text>
-        </text>
+      </text>
-      </block>
+      <text class="van-submit-bar__suffix-label">{{ suffixLabel }}</text>
     </view>
     <van-button
       square

lib/submit-bar/index.wxss

@@ -1 +1 @@
-@import '../common/index.wxss';.van-submit-bar{z-index:100;position:fixed;bottom:0;left:0;width:100%;-webkit-user-select:none;user-select:none}.van-submit-bar__tip{padding:10px;color:#f56723;font-size:12px;line-height:18px;background-color:#fff7cc}.van-submit-bar__tip-icon{width:12px;height:12px;margin-right:4px;vertical-align:middle}.van-submit-bar__tip-text{display:inline;vertical-align:middle}.van-submit-bar__bar{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;height:50px;background-color:#fff;font-size:14px}.van-submit-bar__bar--safe{padding-bottom:34px}.van-submit-bar__text{-webkit-flex:1;flex:1;color:#333;font-weight:500;text-align:right}.van-submit-bar__price{color:#f44;font-size:18px;padding-right:12px}.van-submit-bar__currency{font-size:14px}.van-submit-bar__button{width:110px}
+@import '../common/index.wxss';.van-submit-bar{position:fixed;bottom:0;left:0;z-index:100;width:100%;-webkit-user-select:none;user-select:none}.van-submit-bar__tip{padding:10px;font-size:12px;line-height:1.5;color:#f56723;background-color:#fff7cc}.van-submit-bar__tip:empty{display:none}.van-submit-bar__tip-icon{width:12px;height:12px;margin-right:4px;vertical-align:middle}.van-submit-bar__tip-text{display:inline;vertical-align:middle}.van-submit-bar__bar{display:-webkit-flex;display:flex;height:50px;font-size:14px;background-color:#fff;-webkit-align-items:center;align-items:center;-webkit-justify-content:flex-end;justify-content:flex-end}.van-submit-bar__bar--safe{padding-bottom:34px}.van-submit-bar__text{padding-right:12px;font-weight:500;color:#333;-webkit-flex:1;flex:1;text-align:right}.van-submit-bar__price{font-size:18px;color:#f44}.van-submit-bar__currency{font-size:14px}.van-submit-bar__suffix-label{margin-left:5px}.van-submit-bar__button{width:110px}

lib/tabbar-item/index.js

@@ -5,14 +5,14 @@ component_1.VantComponent({
     props: {
         info: null,
         icon: String,
-        dot: Boolean
+        dot: Boolean,
+        name: {
+            type: [String, Number]
+        }
     },
     relation: {
         name: 'tabbar',
-        type: 'ancestor',
+        type: 'ancestor'
-        linked: function (target) {
-            this.parent = target;
-        }
     },
     data: {
         active: false
@@ -24,12 +24,28 @@ component_1.VantComponent({
             }
             this.$emit('click');
         },
-        setActive: function (_a) {
+        updateFromParent: function () {
-            var active = _a.active, color = _a.color;
+            var parent = this.parent;
-            if (this.data.active !== active) {
+            if (!parent) {
-                return this.set({ active: active, color: color });
+                return;
             }
-            return Promise.resolve();
+            var index = parent.children.indexOf(this);
+            var parentData = parent.data;
+            var data = this.data;
+            var active = (data.name || index) === parentData.active;
+            var patch = {};
+            if (active !== data.active) {
+                patch.active = active;
+            }
+            if (parentData.activeColor !== data.activeColor) {
+                patch.activeColor = parentData.activeColor;
+            }
+            if (parentData.inactiveColor !== data.inactiveColor) {
+                patch.inactiveColor = parentData.inactiveColor;
+            }
+            return Object.keys(patch).length > 0
+                ? this.set(patch)
+                : Promise.resolve();
         }
     }
 });

lib/tabbar-item/index.wxml

@@ -2,7 +2,7 @@
 
 <view
   class="{{ utils.bem('tabbar-item', { active }) }} custom-class"
-  style="{{ active && color ? 'color: ' + color : '' }}"
+  style="color: {{ active ? activeColor : inactiveColor }}"
   bind:tap="onClick"
 >
   <view class="{{ utils.bem('tabbar-item__icon', { dot }) }}">

lib/tabbar/index.js

@@ -8,19 +8,28 @@ component_1.VantComponent({
         name: 'tabbar-item',
         type: 'descendant',
         linked: function (target) {
-            this.children = this.children || [];
             this.children.push(target);
-            this.setActiveItem();
+            target.parent = this;
+            target.updateFromParent();
         },
         unlinked: function (target) {
-            this.children = this.children || [];
             this.children = this.children.filter(function (item) { return item !== target; });
-            this.setActiveItem();
+            this.updateChildren();
         }
     },
     props: {
-        active: Number,
+        active: {
-        activeColor: String,
+            type: [Number, String],
+            observer: 'updateChildren'
+        },
+        activeColor: {
+            type: String,
+            observer: 'updateChildren'
+        },
+        inactiveColor: {
+            type: String,
+            observer: 'updateChildren'
+        },
         fixed: {
             type: Boolean,
             value: true
@@ -34,36 +43,22 @@ component_1.VantComponent({
             value: 1
         }
     },
-    watch: {
+    beforeCreate: function () {
-        active: function (active) {
+        this.children = [];
-            this.currentActive = active;
-            this.setActiveItem();
-        }
-    },
-    created: function () {
-        this.currentActive = this.data.active;
     },
     methods: {
-        setActiveItem: function () {
+        updateChildren: function () {
-            var _this = this;
+            var children = this.children;
-            if (!Array.isArray(this.children) || !this.children.length) {
+            if (!Array.isArray(children) || !children.length) {
                 return Promise.resolve();
             }
-            return Promise.all(this.children.map(function (item, index) {
+            return Promise.all(children.map(function (child) { return child.updateFromParent(); }));
-                return item.setActive({
-                    active: index === _this.currentActive,
-                    color: _this.data.activeColor
-                });
-            }));
         },
         onChange: function (child) {
-            var _this = this;
+            var index = this.children.indexOf(child);
-            var active = (this.children || []).indexOf(child);
+            var active = child.data.name || index;
-            if (active !== this.currentActive && active !== -1) {
+            if (active !== this.data.active) {
-                this.currentActive = active;
+                this.$emit('change', active);
-                this.setActiveItem().then(function () {
-                    _this.$emit('change', active);
-                });
             }
         }
     }