From ead090d2db789d98d0889e52ae742767c47225e5 Mon Sep 17 00:00:00 2001
From: Amy <funan_amy@foxmail.com>
Date: Wed, 21 Mar 2018 21:52:03 +0800
Subject: [PATCH] <add>(create-api): $updateProps + (picker): watch
 selectedIndex (#131)

* <add>(create-api): $updateProps + (picker): watch selectIndex

* <delete> immediate
---
 example/pages/picker.vue                    | 23 +++++++++++++++++++--
 src/common/helpers/instantiate-component.js |  4 ++++
 src/components/picker/picker.vue            |  8 +++++--
 3 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/example/pages/picker.vue b/example/pages/picker.vue
index a5b49a8c..25f17fc9 100644
--- a/example/pages/picker.vue
+++ b/example/pages/picker.vue
@@ -4,8 +4,9 @@
       <cube-button-group>
         <cube-button @click="showPicker">Picker</cube-button>
         <cube-button @click="showMutiPicker">Multi-column Picker</cube-button>
-        <cube-button @click="showAliasPicker">Use Alias</cube-button>
-        <cube-button @click="showSetDataPicker">Use SetData</cube-button>
+        <cube-button @click="showAliasPicker">Use alias</cube-button>
+        <cube-button @click="showSetDataPicker">Use setData</cube-button>
+        <cube-button @click="showUpdatePropsPicker">Use $updateProps</cube-button>
         <cube-button @click="showNormalTimePicker">Normal Time Picker</cube-button>
       </cube-button-group>
     </div>
@@ -55,6 +56,14 @@
         onCancel: this.cancelHandle
       })
 
+      this.updatePropsPicker = this.$createPicker({
+        title: 'Use $updateProps',
+        data: [data1],
+        selectedIndex: [0],
+        onSelect: this.selectHandle,
+        onCancel: this.cancelHandle
+      })
+
       this.normalTimePicker = this.$createNormalTimePicker({
         selectedIndex: [10, 20, 59],
         onSelect: this.selectHandle,
@@ -75,6 +84,16 @@
         this.setDataPicker.setData([data1, data2, data3], [1, 2, 3])
         this.setDataPicker.show()
       },
+      showUpdatePropsPicker() {
+        this.updatePropsPicker.show()
+        setTimeout(() => {
+          this.updatePropsPicker.$updateProps({
+            title: 'Updated',
+            data: [data1, data2, data3],
+            selectedIndex: [1, 2, 3]
+          })
+        }, 1000)
+      },
       showNormalTimePicker() {
         this.normalTimePicker.show()
       },
diff --git a/src/common/helpers/instantiate-component.js b/src/common/helpers/instantiate-component.js
index 6f0170f9..04db2c20 100644
--- a/src/common/helpers/instantiate-component.js
+++ b/src/common/helpers/instantiate-component.js
@@ -29,5 +29,9 @@ export default function instantiateComponent(Vue, Component, data, renderFn) {
   instance.$mount()
   instance.init()
   const component = instance.$children[0]
+  component.$updateProps = function (props) {
+    Object.assign(renderData.props, props)
+    instance.$forceUpdate()
+  }
   return component
 }
diff --git a/src/components/picker/picker.vue b/src/components/picker/picker.vue
index 93fe4c5d..986407b7 100644
--- a/src/components/picker/picker.vue
+++ b/src/components/picker/picker.vue
@@ -174,6 +174,7 @@
             let wheelWrapper = this.$refs.wheelWrapper
             for (let i = 0; i < this.pickerData.length; i++) {
               this._createWheel(wheelWrapper, i).enable()
+              this.wheels[i].wheelTo(this.pickerSelectedIndex[i])
             }
             this.dirty && this._destroyExtraWheels()
             this.dirty = false
@@ -293,8 +294,11 @@
       }
     },
     watch: {
-      data(newData) {
-        this.setData(newData, this.selectedIndex)
+      data(newVal) {
+        this.setData(newVal, this.selectedIndex)
+      },
+      selectedIndex(newVal) {
+        this.setData(this.data, newVal)
       }
     },
     components: {
-- 
GitLab