<add>: pickerMixin (#133)

src/common/mixins/picker.js

+const DEFAULT_KEYS = {
+  value: 'value',
+  text: 'text'
+}
+
+export default {
+  props: {
+    data: {
+      type: Array,
+      default() {
+        return []
+      }
+    },
+    selectedIndex: {
+      type: Array,
+      default() {
+        return []
+      }
+    },
+    title: {
+      type: String
+    },
+    cancelTxt: {
+      type: String,
+      default: '取消'
+    },
+    confirmTxt: {
+      type: String,
+      default: '确定'
+    },
+    swipeTime: {
+      type: Number,
+      default: 2500
+    },
+    alias: {
+      type: Object,
+      default() {
+        return {}
+      }
+    },
+    zIndex: {
+      type: Number
+    }
+  },
+  computed: {
+    valueKey() {
+      return this.alias.value || DEFAULT_KEYS.value
+    },
+    textKey() {
+      return this.alias.text || DEFAULT_KEYS.text
+    }
+  },
+  watch: {
+    data(newVal) {
+      this.setData(newVal, this.selectedIndex)
+    },
+    selectedIndex(newVal) {
+      this.setData(this.data, newVal)
+    }
+  }
+}

src/components/cascade-picker/cascade-picker.vue

@@ -16,59 +16,16 @@
 <script type="text/ecmascript-6">
   import CubePicker from '../picker/picker.vue'
   import apiMixin from '../../common/mixins/api'
+  import pickerMixin from '../../common/mixins/picker'
 
   const COMPONENT_NAME = 'cube-cascade-picker'
   const EVENT_SELECT = 'select'
   const EVENT_CANCEL = 'cancel'
   const EVENT_CHANGE = 'change'
 
-  const DEFAULT_KEYS = {
-    value: 'value',
-    text: 'text'
-  }
-
   export default {
     name: COMPONENT_NAME,
-    mixins: [apiMixin],
-    props: {
-      title: {
-        type: String,
-        default: 'Cascade Picker'
-      },
-      data: {
-        type: Array,
-        default() {
-          return []
-        }
-      },
-      selectedIndex: {
-        type: Array,
-        default() {
-          return []
-        }
-      },
-      cancelTxt: {
-        type: String,
-        default: '取消'
-      },
-      confirmTxt: {
-        type: String,
-        default: '确定'
-      },
-      swipeTime: {
-        type: Number,
-        default: 2500
-      },
-      alias: {
-        type: Object,
-        default() {
-          return {}
-        }
-      },
-      zIndex: {
-        type: Number
-      }
-    },
+    mixins: [apiMixin, pickerMixin],
     data () {
       return {
         cascadeData: this.data.slice(),
@@ -76,24 +33,8 @@
         pickerData: []
       }
     },
-    computed: {
-      valueKey() {
-        return this.alias.value || DEFAULT_KEYS.value
-      },
-      textKey() {
-        return this.alias.text || DEFAULT_KEYS.text
-      }
-    },
     created() {
-      this.updatePickerData()
-    },
-    watch: {
-      data(newVal) {
-        this.setData(newVal, this.selectedIndex)
-      },
-      selectedIndex(newVal) {
-        this.setData(this.data, newVal)
-      }
+      this._updatePickerData()
     },
     methods: {
       show() {
@@ -105,7 +46,7 @@
       setData(data, selectedIndex = []) {
         this.cascadeData = data
         this.pickerSelectedIndex = selectedIndex
-        this.updatePickerData()
+        this._updatePickerData()
       },
       _pickerSelect(selectedVal, selectedIndex, selectedText) {
         this.$emit(EVENT_SELECT, selectedVal, selectedIndex, selectedText)
@@ -116,11 +57,11 @@
       _pickerChange(i, newIndex) {
         if (newIndex !== this.pickerSelectedIndex[i]) {
           this.pickerSelectedIndex.splice(i, 1, newIndex)
-          this.updatePickerData(i + 1)
+          this._updatePickerData(i + 1)
         }
         this.$emit(EVENT_CHANGE, i, newIndex)
       },
-      updatePickerData(fromColumn = 0) {
+      _updatePickerData(fromColumn = 0) {
         let data = this.cascadeData
         let i = 0
         while (data) {

src/components/picker/picker.vue

@@ -37,6 +37,7 @@
   import BScroll from 'better-scroll'
   import CubePopup from '../popup/popup.vue'
   import apiMixin from '../../common/mixins/api'
+  import pickerMixin from '../../common/mixins/picker'
 
   const COMPONENT_NAME = 'cube-picker'
 
@@ -45,66 +46,15 @@
   const EVENT_CANCEL = 'cancel'
   const EVENT_CHANGE = 'change'
 
-  const DEFAULT_KEYS = {
-    value: 'value',
-    text: 'text'
-  }
-
   export default {
     name: COMPONENT_NAME,
-    mixins: [apiMixin],
-    props: {
-      data: {
-        type: Array,
-        default() {
-          return []
-        }
-      },
-      selectedIndex: {
-        type: Array,
-        default() {
-          return []
-        }
-      },
-      title: {
-        type: String
-      },
-      cancelTxt: {
-        type: String,
-        default: '取消'
-      },
-      confirmTxt: {
-        type: String,
-        default: '确定'
-      },
-      swipeTime: {
-        type: Number,
-        default: 2500
-      },
-      alias: {
-        type: Object,
-        default() {
-          return {}
-        }
-      },
-      zIndex: {
-        type: Number
-      }
-    },
+    mixins: [apiMixin, pickerMixin],
     data() {
       return {
         pickerData: this.data.slice(),
         pickerSelectedIndex: this.selectedIndex
       }
     },
-    computed: {
-      valueKey() {
-        return this.alias.value || DEFAULT_KEYS.value
-      },
-      textKey() {
-        return this.alias.text || DEFAULT_KEYS.text
-      }
-    },
     created() {
       this.pickerSelectedVal = []
       if (!this.pickerSelectedIndex.length) {
@@ -293,14 +243,6 @@
         })
       }
     },
-    watch: {
-      data(newVal) {
-        this.setData(newVal, this.selectedIndex)
-      },
-      selectedIndex(newVal) {
-        this.setData(this.data, newVal)
-      }
-    },
     components: {
       CubePopup
     }