[improvement] props default value (#2183)

2025-04-05 19:41:42 +08:00 · 2018-11-29 22:20:42 +08:00 · 2018-11-29 22:20:42 +08:00 · 916dbd9927
commit 916dbd9927
parent ad5121286b
31 changed files with 83 additions and 167 deletions
--- a/packages/actionsheet/index.vue
+++ b/packages/actionsheet/index.vue
@ -67,13 +67,10 @@ export default create({
  mixins: [Popup],

  props: {
-    value: Boolean,
    title: String,
+    value: Boolean,
+    actions: Array,
    cancelText: String,
-    actions: {
-      type: Array,
-      default: () => []
-    },
    overlay: {
      type: Boolean,
      default: true
--- a/packages/address-edit/index.vue
+++ b/packages/address-edit/index.vue
@ -144,6 +144,7 @@ export default create({
    validator: Function,
    showDelete: Boolean,
    showPostal: Boolean,
+    searchResult: Array,
    showSetDefault: Boolean,
    showSearchResult: Boolean,
    saveButtonText: String,
@ -164,10 +165,6 @@ export default create({
      type: Object,
      default: () => ({ ...defaultData })
    },
-    searchResult: {
-      type: Array,
-      default: () => []
-    },
    telValidator: {
      type: Function,
      default: validateMobile
--- a/packages/address-list/index.vue
+++ b/packages/address-list/index.vue
@ -60,20 +60,14 @@ export default create({
  },

  props: {
+    list: Array,
+    disabledList: Array,
    disabledText: String,
    addButtonText: String,
    value: [String, Number],
    switchable: {
      type: Boolean,
      default: true
-    },
-    list: {
-      type: Array,
-      default: () => []
-    },
-    disabledList: {
-      type: Array,
-      default: () => []
    }
  }
 });
--- a/packages/area/index.vue
+++ b/packages/area/index.vue
@ -27,11 +27,8 @@ export default create({
  },

  props: {
+    ...Picker.props,
    value: String,
-    title: String,
-    loading: Boolean,
-    itemHeight: Number,
-    visibleItemCount: Number,
    areaList: {
      type: Object,
      default: () => ({})
@ -45,7 +42,7 @@ export default create({
  data() {
    return {
      code: this.value,
-      columns: [{ values: [] }, { values: [] }, { values: [] }]
+      cols: [{ values: [] }, { values: [] }, { values: [] }]
    };
  },

@ -63,7 +60,7 @@ export default create({
    },

    displayColumns() {
-      return this.columns.slice(0, +this.columnsNum);
+      return this.cols.slice(0, +this.columnsNum);
    }
  },

--- a/packages/checkbox-group/index.vue
+++ b/packages/checkbox-group/index.vue
@ -11,12 +11,9 @@ export default create({
  name: 'checkbox-group',

  props: {
+    max: Number,
    value: Array,
-    disabled: Boolean,
-    max: {
-      type: Number,
-      default: 0
-    }
+    disabled: Boolean
  },

  watch: {
--- a/packages/collapse-item/index.vue
+++ b/packages/collapse-item/index.vue
@ -47,9 +47,9 @@ export default create({
  mixins: [findParent],

  props: {
-    name: [String, Number],
    icon: String,
    label: String,
+    name: [String, Number],
    title: [String, Number],
    value: [String, Number],
    disabled: Boolean,
--- a/packages/contact-list/index.vue
+++ b/packages/contact-list/index.vue
@ -50,12 +50,9 @@ export default create({
  },

  props: {
-    value: {},
-    addText: String,
-    list: {
-      type: Array,
-      default: () => []
-    }
+    value: null,
+    list: Array,
+    addText: String
  }
 });
 </script>
--- a/packages/coupon-cell/index.vue
+++ b/packages/coupon-cell/index.vue
@ -21,14 +21,11 @@ export default create({

  props: {
    title: String,
+    coupons: Array,
    border: {
      type: Boolean,
      default: true
    },
-    coupons: {
-      type: Array,
-      default: () => []
-    },
    chosenCoupon: {
      type: Number,
      default: -1
--- a/packages/coupon-list/index.vue
+++ b/packages/coupon-list/index.vue
@ -103,6 +103,8 @@ export default create({

  props: {
    code: String,
+    coupons: Array,
+    disabledCoupons: Array,
    closeButtonText: String,
    inputPlaceholder: String,
    exchangeButtonText: String,
@ -116,14 +118,6 @@ export default create({
      type: Number,
      default: -1
    },
-    coupons: {
-      type: Array,
-      default: () => []
-    },
-    disabledCoupons: {
-      type: Array,
-      default: () => []
-    },
    displayedCouponIndex: {
      type: Number,
      default: -1
--- a/packages/datetime-picker/index.vue
+++ b/packages/datetime-picker/index.vue
@ -2,7 +2,7 @@
  <picker
    ref="picker"
    :title="title"
-    :columns="columns"
+    :columns="cols"
    :item-height="itemHeight"
    :show-toolbar="showToolbar"
    :visible-item-count="visibleItemCount"
@ -30,12 +30,10 @@ export default create({
  },

  props: {
+    ...Picker.props,
    value: null,
-    title: String,
-    itemHeight: Number,
-    visibleItemCount: Number,
-    confirmButtonText: String,
-    cancelButtonText: String,
+    minHour: Number,
+    minMinute: Number,
    type: {
      type: String,
      default: 'datetime'
@ -62,18 +60,10 @@ export default create({
      default: () => new Date(currentYear + 10, 11, 31),
      validator: isValidDate
    },
-    minHour: {
-      type: Number,
-      default: 0
-    },
    maxHour: {
      type: Number,
      default: 23
    },
-    minMinute: {
-      type: Number,
-      default: 0
-    },
    maxMinute: {
      type: Number,
      default: 59
@ -97,7 +87,7 @@ export default create({
      this.$emit('input', val);
    },

-    columns() {
+    cols() {
      this.updateColumnValue(this.innerValue);
    }
  },
@ -148,7 +138,7 @@ export default create({
      return result;
    },

-    columns() {
+    cols() {
      const results = this.ranges.map(({ type, range }) => {
        const values = this.times(range[1] - range[0] + 1, index => {
          let value = range[0] + index;
--- a/packages/image-preview/ImagePreview.vue
+++ b/packages/image-preview/ImagePreview.vue
@ -59,19 +59,13 @@ export default create({
  },

  props: {
+    images: Array,
+    startPosition: Number,
    showIndicators: Boolean,
-    images: {
-      type: Array,
-      default: () => []
-    },
    loop: {
      type: Boolean,
      default: true
    },
-    startPosition: {
-      type: Number,
-      default: 0
-    },
    overlay: {
      type: Boolean,
      default: true
--- a/packages/lazyload/demo/index.vue
+++ b/packages/lazyload/demo/index.vue
@ -55,12 +55,6 @@ export default {
        'https://img.yzcdn.cn/public_files/2017/09/05/8a4f5be8289cb3a7434fc19a3de780a2.jpg'
      ]
    };
-  },
-
-  methods: {
-    handleComponentShow() {
-      console.log('component show');
-    }
  }
 };
 </script>
--- a/packages/mixins/popup/Modal.vue
+++ b/packages/mixins/popup/Modal.vue
@ -16,8 +16,8 @@ export default {
  name: 'modal',

  props: {
-    visible: Boolean,
    zIndex: Number,
+    visible: Boolean,
    className: String,
    customStyle: Object
  },
--- a/packages/number-keyboard/Key.vue
+++ b/packages/number-keyboard/Key.vue
@ -16,11 +16,8 @@ export default create({
  name: 'key',

  props: {
-    text: [String, Number],
-    type: {
-      type: Array,
-      default: () => []
-    }
+    type: Array,
+    text: [String, Number]
  },

  data() {
--- a/packages/pagination/index.vue
+++ b/packages/pagination/index.vue
@ -42,6 +42,7 @@ export default create({
    prevText: String,
    nextText: String,
    pageCount: Number,
+    totalItems: Number,
    forceEllipses: Boolean,
    mode: {
      type: String,
@ -54,10 +55,6 @@ export default create({
    showPageSize: {
      type: Number,
      default: 5
-    },
-    totalItems: {
-      type: Number,
-      default: 0
    }
  },

--- a/packages/picker/PickerColumn.vue
+++ b/packages/picker/PickerColumn.vue
@ -38,15 +38,9 @@ export default create({
    valueKey: String,
    className: String,
    itemHeight: Number,
-    visibleItemCount: Number,
-    initialOptions: {
-      type: Array,
-      default: () => []
-    },
-    defaultIndex: {
-      type: Number,
-      default: 0
-    }
+    defaultIndex: Number,
+    initialOptions: Array,
+    visibleItemCount: Number
  },

  data() {
--- a/packages/picker/index.vue
+++ b/packages/picker/index.vue
@ -71,6 +71,7 @@ export default create({

  props: {
    title: String,
+    columns: Array,
    loading: Boolean,
    showToolbar: Boolean,
    confirmButtonText: String,
@ -86,10 +87,6 @@ export default create({
    itemHeight: {
      type: Number,
      default: 44
-    },
-    columns: {
-      type: Array,
-      default: () => []
    }
  },

--- a/packages/picker/test/snapshots/index.spec.js.snap
+++ b/packages/picker/test/snapshots/index.spec.js.snap
@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

 exports[`column watch default index 1`] = `
-<div class="van-picker-column">
+<div class="van-picker-column" style="height: 0px;">
  <ul style="line-height: 50px;">
    <li class="van-ellipsis van-picker-column__item van-picker-column__item--disabled" style="height: 50px;">1</li>
    <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 50px;">1990</li>
@ -15,7 +15,7 @@ exports[`column watch default index 1`] = `
 `;

 exports[`column watch default index 2`] = `
-<div class="van-picker-column">
+<div class="van-picker-column" style="height: 0px;">
  <ul style="line-height: 50px;">
    <li class="van-ellipsis van-picker-column__item van-picker-column__item--disabled" style="height: 50px;">1</li>
    <li class="van-ellipsis van-picker-column__item" style="height: 50px;">1990</li>
--- a/packages/popup/index.vue
+++ b/packages/popup/index.vue
@ -20,6 +20,7 @@ export default create({
  mixins: [Popup],

  props: {
+    position: String,
    transition: String,
    overlay: {
      type: Boolean,
@ -28,16 +29,12 @@ export default create({
    closeOnClickOverlay: {
      type: Boolean,
      default: true
-    },
-    position: {
-      type: String,
-      default: ''
    }
  },

  computed: {
    currentTransition() {
-      return this.transition || (this.position === '' ? 'van-fade' : `popup-slide-${this.position}`);
+      return this.transition || (this.position ? `popup-slide-${this.position}` : 'van-fade');
    }
  }
 });
--- a/packages/rate/index.vue
+++ b/packages/rate/index.vue
@ -23,6 +23,7 @@ export default create({
  name: 'rate',

  props: {
+    value: Number,
    readonly: Boolean,
    disabled: Boolean,
    size: {
@ -52,10 +53,6 @@ export default create({
    count: {
      type: Number,
      default: 5
-    },
-    value: {
-      type: Number,
-      default: 0
    }
  },

--- a/packages/sku/Sku.vue
+++ b/packages/sku/Sku.vue
@ -160,11 +160,13 @@ export default create({
  props: {
    sku: Object,
    goods: Object,
+    quota: Number,
    value: Boolean,
    buyText: String,
+    quotaUsed: Number,
    goodsId: [Number, String],
-    stepperTitle: String,
    hideStock: Boolean,
+    stepperTitle: String,
    getContainer: Function,
    resetStepperOnHide: Boolean,
    resetSelectedSkuOnHide: Boolean,
@ -174,14 +176,6 @@ export default create({
      type: Object,
      default: () => ({})
    },
-    quota: {
-      type: Number,
-      default: 0
-    },
-    quotaUsed: {
-      type: Number,
-      default: 0
-    },
    showAddCartBtn: {
      type: Boolean,
      default: true
--- a/packages/sku/components/SkuImgUploader.vue
+++ b/packages/sku/components/SkuImgUploader.vue
@ -62,10 +62,7 @@ export default create({

  props: {
    value: String,
-    uploadImg: {
-      type: Function,
-      required: true
-    },
+    uploadImg: Function,
    maxSize: {
      type: Number,
      default: 6
--- a/packages/sku/components/SkuStepper.vue
+++ b/packages/sku/components/SkuStepper.vue
@ -42,15 +42,15 @@ export default create({
  },

  props: {
-    skuEventBus: Object,
-    skuStockNum: Number,
-    selectedSku: Object,
-    selectedSkuComb: Object,
-    selectedNum: Number,
-    stepperTitle: String,
    quota: Number,
    quotaUsed: Number,
    hideStock: Boolean,
+    skuEventBus: Object,
+    skuStockNum: Number,
+    selectedSku: Object,
+    selectedNum: Number,
+    stepperTitle: String,
+    selectedSkuComb: Object,
    disableStepperInput: Boolean,
    customStepperConfig: Object
  },
--- a/packages/slider/index.vue
+++ b/packages/slider/index.vue
@ -28,23 +28,17 @@ export default create({
  mixins: [Touch],

  props: {
+    min: Number,
+    value: Number,
    disabled: Boolean,
    max: {
      type: Number,
      default: 100
    },
-    min: {
-      type: Number,
-      default: 0
-    },
    step: {
      type: Number,
      default: 1
    },
-    value: {
-      type: Number,
-      default: 0
-    },
    barHeight: {
      type: String,
      default: '2px'
--- a/packages/submit-bar/index.vue
+++ b/packages/submit-bar/index.vue
@ -42,7 +42,6 @@ export default create({

  props: {
    tip: String,
-    type: Number,
    price: Number,
    label: String,
    loading: Boolean,
--- a/packages/swipe-cell/index.vue
+++ b/packages/swipe-cell/index.vue
@ -47,14 +47,8 @@ export default create({
  props: {
    onClose: Function,
    disabled: Boolean,
-    leftWidth: {
-      type: Number,
-      default: 0
-    },
-    rightWidth: {
-      type: Number,
-      default: 0
-    }
+    leftWidth: Number,
+    rightWidth: Number
  },

  directives: {
--- a/packages/swipe/index.vue
+++ b/packages/swipe/index.vue
@ -41,6 +41,7 @@ export default create({
    height: Number,
    autoplay: Number,
    vertical: Boolean,
+    initialSwipe: Number,
    indicatorColor: String,
    loop: {
      type: Boolean,
@ -50,10 +51,6 @@ export default create({
      type: Boolean,
      default: true
    },
-    initialSwipe: {
-      type: Number,
-      default: 0
-    },
    showIndicators: {
      type: Boolean,
      default: true
--- a/packages/tabs/index.less
+++ b/packages/tabs/index.less
@ -12,7 +12,6 @@
  text-align: center;
  box-sizing: border-box;
  background-color: @white;
-  transition: color .3s;

  span {
    display: block;
--- a/packages/tabs/index.vue
+++ b/packages/tabs/index.vue
@ -73,8 +73,12 @@ export default create({
    color: String,
    sticky: Boolean,
    animated: Boolean,
-    lineWidth: Number,
+    offsetTop: Number,
    swipeable: Boolean,
+    lineWidth: {
+      type: Number,
+      default: null
+    },
    active: {
      type: [Number, String],
      default: 0
@ -90,10 +94,6 @@ export default create({
    swipeThreshold: {
      type: Number,
      default: 4
-    },
-    offsetTop: {
-      type: Number,
-      default: 0
    }
  },

--- a/packages/tree-select/index.vue
+++ b/packages/tree-select/index.vue
@ -42,14 +42,8 @@ export default create({
  name: 'tree-select',

  props: {
-    items: {
-      type: Array,
-      default: () => []
-    },
-    mainActiveIndex: {
-      type: Number,
-      default: 0
-    },
+    items: Array,
+    mainActiveIndex: Number,
    activeId: {
      type: [Number, String],
      default: 0
--- a/packages/utils/create-basic.js
+++ b/packages/utils/create-basic.js
@ -6,10 +6,30 @@ import bem from '../mixins/bem';
 import i18n from '../mixins/i18n';
 import { isDef } from './';

-const install = function(Vue) {
+function install(Vue) {
  Vue.component(this.name, this);
 };

+function returnArray() {
+  return [];
+};
+
+function defaultProps(props) {
+  Object.keys(props).forEach(key => {
+    if (props[key] === Array) {
+      props[key] = {
+        type: Array,
+        default: returnArray
+      };
+    } else if (props[key] === Number) {
+      props[key] = {
+        type: Number,
+        default: 0
+      };
+    }
+  });
+}
+
 export default function(sfc) {
  sfc.name = 'van-' + sfc.name;
  sfc.install = sfc.install || install;
@ -17,6 +37,7 @@ export default function(sfc) {
  sfc.mixins.push(i18n, bem);
  sfc.methods = sfc.methods || {};
  sfc.methods.isDef = isDef;
+  sfc.props && defaultProps(sfc.props);

  return sfc;
-};
+}