[improvement] add Picker prop mixin (#2191)

packages/area/index.vue

@@ -18,16 +18,18 @@
 <script>
 import create from '../utils/create';
 import Picker from '../picker';
+import PickerMixin from '../mixins/picker';
 
 export default create({
   name: 'area',
 
+  mixins: [PickerMixin],
+
   components: {
     Picker
   },
 
   props: {
-    ...Picker.props,
     value: String,
     areaList: {
       type: Object,
@@ -42,7 +44,7 @@ export default create({
   data() {
     return {
       code: this.value,
-      cols: [{ values: [] }, { values: [] }, { values: [] }]
+      columns: [{ values: [] }, { values: [] }, { values: [] }]
     };
   },
 
@@ -60,7 +62,7 @@ export default create({
     },
 
     displayColumns() {
-      return this.cols.slice(0, +this.columnsNum);
+      return this.columns.slice(0, +this.columnsNum);
     }
   },
 

packages/datetime-picker/index.vue

@@ -2,7 +2,7 @@
   <picker
     ref="picker"
     :title="title"
-    :columns="cols"
+    :columns="columns"
     :item-height="itemHeight"
     :show-toolbar="showToolbar"
     :visible-item-count="visibleItemCount"
@@ -18,6 +18,7 @@
 import Picker from '../picker';
 import create from '../utils/create';
 import { range } from '../utils';
+import PickerMixin from '../mixins/picker';
 
 const currentYear = new Date().getFullYear();
 const isValidDate = date => Object.prototype.toString.call(date) === '[object Date]' && !isNaN(date.getTime());
@@ -25,12 +26,13 @@ const isValidDate = date => Object.prototype.toString.call(date) === '[object Da
 export default create({
   name: 'datetime-picker',
 
+  mixins: [PickerMixin],
+
   components: {
     Picker
   },
 
   props: {
-    ...Picker.props,
     value: null,
     minHour: Number,
     minMinute: Number,
@@ -87,7 +89,7 @@ export default create({
       this.$emit('input', val);
     },
 
-    cols() {
+    columns() {
       this.updateColumnValue(this.innerValue);
     }
   },
@@ -138,7 +140,7 @@ export default create({
       return result;
     },
 
-    cols() {
+    columns() {
       const results = this.ranges.map(({ type, range }) => {
         const values = this.times(range[1] - range[0] + 1, index => {
           let value = range[0] + index;

packages/mixins/cell.js

@@ -11,9 +11,9 @@ export default {
     titleClass: String,
     valueClass: String,
     labelClass: String,
+    title: [String, Number],
     value: [String, Number],
     label: [String, Number],
-    title: [String, Number],
     border: {
       type: Boolean,
       default: true

packages/mixins/picker.js

@@ -0,0 +1,21 @@
+/**
+ * Common Picker Props
+ */
+
+export default {
+  props: {
+    title: String,
+    loading: Boolean,
+    showToolbar: Boolean,
+    cancelButtonText: String,
+    confirmButtonText: String,
+    visibleItemCount: {
+      type: Number,
+      default: 5
+    },
+    itemHeight: {
+      type: Number,
+      default: 44
+    }
+  }
+};

packages/picker/index.vue

@@ -61,32 +61,22 @@
 import create from '../utils/create';
 import PickerColumn from './PickerColumn';
 import deepClone from '../utils/deep-clone';
+import PickerMixin from '../mixins/picker';
 
 export default create({
   name: 'picker',
 
+  mixins: [PickerMixin],
+
   components: {
     PickerColumn
   },
 
   props: {
-    title: String,
     columns: Array,
-    loading: Boolean,
-    showToolbar: Boolean,
-    confirmButtonText: String,
-    cancelButtonText: String,
-    visibleItemCount: {
-      type: Number,
-      default: 5
-    },
     valueKey: {
       type: String,
       default: 'text'
-    },
-    itemHeight: {
-      type: Number,
-      default: 44
     }
   },