From e23cd269c82128e6217210431dd5e54094bceb04 Mon Sep 17 00:00:00 2001
From: AmyFoxFN <funan_amy@foxmail.com>
Date: Thu, 19 Apr 2018 20:54:51 +0800
Subject: [PATCH 01/17] feat(popups): use v-model to toggle

---
 document/main.js               |  2 +-
 example/pages/popup.vue        | 29 +++++++++++++++------------
 src/common/mixins/api.js       |  1 +
 src/common/mixins/popup.js     | 36 ++++++++++++++++++++++++++++++++++
 src/components/popup/popup.vue |  4 ++--
 5 files changed, 56 insertions(+), 16 deletions(-)
 create mode 100644 src/common/mixins/popup.js

diff --git a/document/main.js b/document/main.js
index d0d467bd5..9bb2701b0 100644
--- a/document/main.js
+++ b/document/main.js
@@ -6,7 +6,7 @@ import App from './App.vue'
 import router from './router'
 import './common/js/highlight'
 
-// TODO 需要使用 vConsole 的同学请打开注释即可
+// 需要使用 vConsole 的同学请打开注释即可
 /* eslint-disable no-unused-vars */
 // import vConsole from 'vconsole'
 
diff --git a/example/pages/popup.vue b/example/pages/popup.vue
index 6a3255c14..ce9850cae 100644
--- a/example/pages/popup.vue
+++ b/example/pages/popup.vue
@@ -2,20 +2,20 @@
   <cube-page type="popup-view" title="popup">
     <template slot="content">
       <div>
-        <cube-popup type="my-popup" ref="myPopup">My Popup Content 1</cube-popup>
-        <cube-button @click="showPopup('myPopup')">Show Popup</cube-button>
+        <cube-popup type="my-popup" v-model="visible1">My Popup Content 1</cube-popup>
+        <cube-button @click="showPopup(1)">Show Popup</cube-button>
       </div>
       <div>
-        <cube-popup type="my-popup" :mask="false" ref="myPopup2">My Popup Content 2</cube-popup>
-        <cube-button @click="showPopup('myPopup2')">Show Popup - no mask</cube-button>
+        <cube-popup type="my-popup" v-model="visible2" :mask="false">My Popup Content 2</cube-popup>
+        <cube-button @click="showPopup(2)">Show Popup - no mask</cube-button>
       </div>
       <div>
-        <cube-popup type="my-popup" :mask="false" content="<i>My Popup Content 3</i>" ref="myPopup3"></cube-popup>
-        <cube-button @click="showPopup('myPopup3')">Show Popup - with content</cube-button>
+        <cube-popup type="my-popup" v-model="visible3" :mask="false" content="<i>My Popup Content 3</i>" ref="myPopup3"></cube-popup>
+        <cube-button @click="showPopup(3)">Show Popup - with content</cube-button>
       </div>
       <div>
-        <cube-popup type="my-popup" :center="false" ref="myPopup4">My Popup Content 4</cube-popup>
-        <cube-button @click="showPopup('myPopup4')">Show Popup - bottom</cube-button>
+        <cube-popup type="my-popup" v-model="visible4" :center="false" ref="myPopup4">My Popup Content 4</cube-popup>
+        <cube-button @click="showPopup(4)">Show Popup - bottom</cube-button>
       </div>
       <div>
         <cube-extend-popup content="click here hide" ref="extendPopup"></cube-extend-popup>
@@ -34,15 +34,18 @@
     data() {
       return {
         type: 'popup-dialog',
-        mask: true
+        mask: true,
+        visible1: false,
+        visible2: false,
+        visible3: false,
+        visible4: false
       }
     },
     methods: {
-      showPopup(refId) {
-        const component = this.$refs[refId]
-        component.show()
+      showPopup(i) {
+        this['visible' + i] = true
         setTimeout(() => {
-          component.hide()
+          this['visible' + i] = false
         }, 1000)
       }
     },
diff --git a/src/common/mixins/api.js b/src/common/mixins/api.js
index e32de6a2f..94bb00bca 100644
--- a/src/common/mixins/api.js
+++ b/src/common/mixins/api.js
@@ -1,3 +1,4 @@
+// TODO DELETE
 export default {
   data() {
     return {
diff --git a/src/common/mixins/popup.js b/src/common/mixins/popup.js
new file mode 100644
index 000000000..cd43a9cdb
--- /dev/null
+++ b/src/common/mixins/popup.js
@@ -0,0 +1,36 @@
+const EVENT_TOGGLE = 'toggle'
+
+export default {
+  model: {
+    prop: 'visible',
+    event: EVENT_TOGGLE
+  },
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      // If use the prop visible directly, the toggle will failed when user haven't set v-model as a reactive property.
+      // So we use the data isVisible instead.
+      isVisible: this.visible
+    }
+  },
+  watch: {
+    visible(newVal) {
+      this.isVisible = newVal
+    }
+  },
+  methods: {
+    show() {
+      this.isVisible = true
+      this.$emit(EVENT_TOGGLE, true)
+    },
+    hide() {
+      this.isVisible = false
+      this.$emit(EVENT_TOGGLE, false)
+    }
+  }
+}
diff --git a/src/components/popup/popup.vue b/src/components/popup/popup.vue
index 12d1b9988..cb7330d27 100644
--- a/src/components/popup/popup.vue
+++ b/src/components/popup/popup.vue
@@ -14,13 +14,13 @@
 </template>
 
 <script type="text/ecmascript-6">
-  import apiMixin from '../../common/mixins/api'
+  import popupMixin from '../../common/mixins/popup'
   const COMPONENT_NAME = 'cube-popup'
   const EVENT_MASK_CLICK = 'mask-click'
 
   export default {
     name: COMPONENT_NAME,
-    mixins: [apiMixin],
+    mixins: [popupMixin],
     props: {
       type: {
         type: String,

From bdc797e0d3d5529b08705f84b7844f35467558f5 Mon Sep 17 00:00:00 2001
From: AmyFoxFN <funan_amy@foxmail.com>
Date: Fri, 20 Apr 2018 15:50:08 +0800
Subject: [PATCH 02/17] feat: popup-based picker v-model

---
 src/common/mixins/popup.js                    |  5 +-
 .../cascade-picker/cascade-picker.vue         | 11 +---
 src/components/date-picker/date-picker.vue    | 11 +---
 src/components/picker/picker.vue              | 65 +++++++++----------
 src/components/toast/toast.vue                |  4 +-
 5 files changed, 40 insertions(+), 56 deletions(-)

diff --git a/src/common/mixins/popup.js b/src/common/mixins/popup.js
index cd43a9cdb..67215af57 100644
--- a/src/common/mixins/popup.js
+++ b/src/common/mixins/popup.js
@@ -21,16 +21,17 @@ export default {
   watch: {
     visible(newVal) {
       this.isVisible = newVal
+    },
+    isVisible(newVal) {
+      this.$emit(EVENT_TOGGLE, newVal)
     }
   },
   methods: {
     show() {
       this.isVisible = true
-      this.$emit(EVENT_TOGGLE, true)
     },
     hide() {
       this.isVisible = false
-      this.$emit(EVENT_TOGGLE, false)
     }
   }
 }
diff --git a/src/components/cascade-picker/cascade-picker.vue b/src/components/cascade-picker/cascade-picker.vue
index 489c806bd..8f1b2e228 100644
--- a/src/components/cascade-picker/cascade-picker.vue
+++ b/src/components/cascade-picker/cascade-picker.vue
@@ -1,6 +1,7 @@
 <template>
   <cube-picker
       ref="picker"
+      v-model="isVisible"
       :data="pickerData"
       :selected-index="pickerSelectedIndex"
       :title="title"
@@ -15,7 +16,7 @@
 
 <script type="text/ecmascript-6">
   import CubePicker from '../picker/picker.vue'
-  import apiMixin from '../../common/mixins/api'
+  import popupMixin from '../../common/mixins/popup'
   import basicPickerMixin from '../../common/mixins/basic-picker'
   import pickerMixin from '../../common/mixins/picker'
 
@@ -26,7 +27,7 @@
 
   export default {
     name: COMPONENT_NAME,
-    mixins: [apiMixin, basicPickerMixin, pickerMixin],
+    mixins: [popupMixin, basicPickerMixin, pickerMixin],
     data () {
       return {
         cascadeData: this.data.slice(),
@@ -38,12 +39,6 @@
       this._updatePickerData()
     },
     methods: {
-      show() {
-        this.$refs.picker.show()
-      },
-      hide() {
-        this.$refs.picker.hide()
-      },
       setData(data, selectedIndex = []) {
         this.cascadeData = data
         this.pickerSelectedIndex = selectedIndex
diff --git a/src/components/date-picker/date-picker.vue b/src/components/date-picker/date-picker.vue
index ed1d28ec6..d3f190bf8 100644
--- a/src/components/date-picker/date-picker.vue
+++ b/src/components/date-picker/date-picker.vue
@@ -1,6 +1,7 @@
 <template>
   <cube-cascade-picker
     ref="cascadePicker"
+    v-model="isVisible"
     :data="data"
     :selectedIndex="selectedIndex"
     :title="title"
@@ -15,7 +16,7 @@
 </template>
 
 <script>
-  import apiMixin from '../../common/mixins/api'
+  import popupMixin from '../../common/mixins/popup'
   import pickerMixin from '../../common/mixins/picker'
   import { deepAssign, findIndex } from '../../common/helpers/util'
   import { computeNatureMaxDay, formatType } from '../../common/lang/date'
@@ -60,7 +61,7 @@
 
   export default {
     name: COMPONENT_NAME,
-    mixins: [apiMixin, pickerMixin],
+    mixins: [popupMixin, pickerMixin],
     props: {
       min: {
         type: [Date, Array],
@@ -159,12 +160,6 @@
       }
     },
     methods: {
-      show() {
-        this.$refs.cascadePicker.show()
-      },
-      hide() {
-        this.$refs.cascadePicker.hide()
-      },
       _select(selectedVal, selectedIndex, selectedText) {
         this.$emit(EVENT_SELECT, this._arrayToDate(selectedVal), selectedVal, selectedText)
       },
diff --git a/src/components/picker/picker.vue b/src/components/picker/picker.vue
index c56bb511a..1531bf625 100644
--- a/src/components/picker/picker.vue
+++ b/src/components/picker/picker.vue
@@ -36,7 +36,7 @@
 <script type="text/ecmascript-6">
   import BScroll from 'better-scroll'
   import CubePopup from '../popup/popup.vue'
-  import apiMixin from '../../common/mixins/api'
+  import popupMixin from '../../common/mixins/popup'
   import basicPickerMixin from '../../common/mixins/basic-picker'
   import pickerMixin from '../../common/mixins/picker'
 
@@ -49,7 +49,7 @@
 
   export default {
     name: COMPONENT_NAME,
-    mixins: [apiMixin, basicPickerMixin, pickerMixin],
+    mixins: [popupMixin, basicPickerMixin, pickerMixin],
     data() {
       return {
         pickerData: this.data.slice(),
@@ -65,6 +65,33 @@
         }
       }
     },
+    watch: {
+      isVisible(newVal) {
+        if (newVal) {
+          if (!this.wheels || this.dirty) {
+            this.$nextTick(() => {
+              this.wheels = this.wheels || []
+              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
+            })
+          } else {
+            for (let i = 0; i < this.pickerData.length; i++) {
+              this.wheels[i].enable()
+              this.wheels[i].wheelTo(this.pickerSelectedIndex[i])
+            }
+          }
+        } else {
+          for (let i = 0; i < this.pickerData.length; i++) {
+            this.wheels[i].disable()
+          }
+        }
+      }
+    },
     methods: {
       confirm() {
         if (!this._canConfirm()) {
@@ -113,40 +140,6 @@
         this.hide()
         this.$emit(EVENT_CANCEL)
       },
-      show() {
-        if (this.isVisible) {
-          return
-        }
-
-        this.isVisible = true
-        if (!this.wheels || this.dirty) {
-          this.$nextTick(() => {
-            this.wheels = this.wheels || []
-            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
-          })
-        } else {
-          for (let i = 0; i < this.pickerData.length; i++) {
-            this.wheels[i].enable()
-            this.wheels[i].wheelTo(this.pickerSelectedIndex[i])
-          }
-        }
-      },
-      hide() {
-        if (!this.isVisible) {
-          return
-        }
-        this.isVisible = false
-
-        for (let i = 0; i < this.pickerData.length; i++) {
-          this.wheels[i].disable()
-        }
-      },
       setData(data, selectedIndex) {
         this.pickerSelectedIndex = selectedIndex ? [...selectedIndex] : []
         this.pickerData = data.slice()
diff --git a/src/components/toast/toast.vue b/src/components/toast/toast.vue
index 4c1c4c548..8023b75c4 100644
--- a/src/components/toast/toast.vue
+++ b/src/components/toast/toast.vue
@@ -10,7 +10,7 @@
 <script type="text/ecmascript-6">
   import CubeLoading from '../loading/loading.vue'
   import CubePopup from '../popup/popup.vue'
-  import apiMixin from '../../common/mixins/api'
+  import popupMixin from '../../common/mixins/popup'
 
   const COMPONENT_NAME = 'cube-toast'
 
@@ -18,7 +18,7 @@
 
   export default {
     name: COMPONENT_NAME,
-    mixins: [apiMixin],
+    mixins: [popupMixin],
     props: {
       type: {
         type: String,

From ed606750d6107696ff20e21c9f52b8228ded7a10 Mon Sep 17 00:00:00 2001
From: AmyFoxFN <funan_amy@foxmail.com>
Date: Fri, 20 Apr 2018 16:11:22 +0800
Subject: [PATCH 03/17] optimize: remain show hide

---
 src/common/mixins/api.js                      | 16 -----
 src/components/action-sheet/action-sheet.vue  |  4 +-
 .../cascade-picker/cascade-picker.vue         |  6 ++
 src/components/date-picker/date-picker.vue    |  6 ++
 src/components/dialog/dialog.vue              |  4 +-
 src/components/drawer/drawer-panel.vue        |  4 +-
 src/components/drawer/drawer.vue              |  4 +-
 src/components/picker/picker.vue              | 61 +++++++++++--------
 .../segment-picker/segment-picker.vue         |  2 +-
 src/components/time-picker/time-picker.vue    |  5 +-
 src/components/tip/tip.vue                    |  4 +-
 11 files changed, 60 insertions(+), 56 deletions(-)
 delete mode 100644 src/common/mixins/api.js

diff --git a/src/common/mixins/api.js b/src/common/mixins/api.js
deleted file mode 100644
index 94bb00bca..000000000
--- a/src/common/mixins/api.js
+++ /dev/null
@@ -1,16 +0,0 @@
-// TODO DELETE
-export default {
-  data() {
-    return {
-      isVisible: false
-    }
-  },
-  methods: {
-    show() {
-      this.isVisible = true
-    },
-    hide() {
-      this.isVisible = false
-    }
-  }
-}
diff --git a/src/components/action-sheet/action-sheet.vue b/src/components/action-sheet/action-sheet.vue
index 40cef6d91..b83a94459 100644
--- a/src/components/action-sheet/action-sheet.vue
+++ b/src/components/action-sheet/action-sheet.vue
@@ -36,7 +36,7 @@
 
 <script type="text/ecmascript-6">
   import CubePopup from '../popup/popup.vue'
-  import apiMixin from '../../common/mixins/api'
+  import popupMixin from '../../common/mixins/popup'
 
   const COMPONENT_NAME = 'cube-action-sheet'
   const EVENT_SELECT = 'select'
@@ -44,7 +44,7 @@
 
   export default {
     name: COMPONENT_NAME,
-    mixins: [apiMixin],
+    mixins: [popupMixin],
     props: {
       data: {
         type: Array,
diff --git a/src/components/cascade-picker/cascade-picker.vue b/src/components/cascade-picker/cascade-picker.vue
index 8f1b2e228..f598e1a05 100644
--- a/src/components/cascade-picker/cascade-picker.vue
+++ b/src/components/cascade-picker/cascade-picker.vue
@@ -39,6 +39,12 @@
       this._updatePickerData()
     },
     methods: {
+      show() {
+        this.$refs.picker.show()
+      },
+      hide() {
+        this.$refs.picker.hide()
+      },
       setData(data, selectedIndex = []) {
         this.cascadeData = data
         this.pickerSelectedIndex = selectedIndex
diff --git a/src/components/date-picker/date-picker.vue b/src/components/date-picker/date-picker.vue
index d3f190bf8..b61e8df13 100644
--- a/src/components/date-picker/date-picker.vue
+++ b/src/components/date-picker/date-picker.vue
@@ -160,6 +160,12 @@
       }
     },
     methods: {
+      show() {
+        this.$refs.cascadePicker.show()
+      },
+      hide() {
+        this.$refs.cascadePicker.hide()
+      },
       _select(selectedVal, selectedIndex, selectedText) {
         this.$emit(EVENT_SELECT, this._arrayToDate(selectedVal), selectedVal, selectedText)
       },
diff --git a/src/components/dialog/dialog.vue b/src/components/dialog/dialog.vue
index 5ca19d3a5..a4afc64b1 100644
--- a/src/components/dialog/dialog.vue
+++ b/src/components/dialog/dialog.vue
@@ -31,7 +31,7 @@
 
 <script type="text/ecmascript-6">
   import CubePopup from '../popup/popup.vue'
-  import apiMixin from '../../common/mixins/api'
+  import popupMixin from '../../common/mixins/popup'
 
   const COMPONENT_NAME = 'cube-dialog'
   const EVENT_CONFIRM = 'confirm'
@@ -62,7 +62,7 @@
 
   export default {
     name: COMPONENT_NAME,
-    mixins: [apiMixin],
+    mixins: [popupMixin],
     props: {
       type: {
         type: String,
diff --git a/src/components/drawer/drawer-panel.vue b/src/components/drawer/drawer-panel.vue
index a5dbd5a63..3ebca4597 100644
--- a/src/components/drawer/drawer-panel.vue
+++ b/src/components/drawer/drawer-panel.vue
@@ -13,7 +13,7 @@
 </template>
 
 <script type="text/ecmascript-6">
-  import apiMixin from '../../common/mixins/api'
+  import popupMixin from '../../common/mixins/popup'
   import CubeScroll from '../scroll/scroll.vue'
   import CubeDrawerItem from './drawer-item.vue'
 
@@ -21,7 +21,7 @@
 
   export default {
     name: COMPONENT_NAME,
-    mixins: [apiMixin],
+    mixins: [popupMixin],
     props: {
       data: {
         type: Array,
diff --git a/src/components/drawer/drawer.vue b/src/components/drawer/drawer.vue
index d25b047a6..cc5930caf 100644
--- a/src/components/drawer/drawer.vue
+++ b/src/components/drawer/drawer.vue
@@ -20,7 +20,7 @@
 <script type="text/ecmascript-6">
   import { prefixStyle } from '../../common/helpers/dom'
   import CubeDrawerPanel from './drawer-panel.vue'
-  import apiMixin from '../../common/mixins/api'
+  import popupMixin from '../../common/mixins/popup'
 
   const COMPONENT_NAME = 'cube-drawer'
   const EVENT_CHANGE = 'change'
@@ -31,7 +31,7 @@
 
   export default {
     name: COMPONENT_NAME,
-    mixins: [apiMixin],
+    mixins: [popupMixin],
     props: {
       title: {
         type: String,
diff --git a/src/components/picker/picker.vue b/src/components/picker/picker.vue
index 1531bf625..63fbd2733 100644
--- a/src/components/picker/picker.vue
+++ b/src/components/picker/picker.vue
@@ -65,33 +65,6 @@
         }
       }
     },
-    watch: {
-      isVisible(newVal) {
-        if (newVal) {
-          if (!this.wheels || this.dirty) {
-            this.$nextTick(() => {
-              this.wheels = this.wheels || []
-              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
-            })
-          } else {
-            for (let i = 0; i < this.pickerData.length; i++) {
-              this.wheels[i].enable()
-              this.wheels[i].wheelTo(this.pickerSelectedIndex[i])
-            }
-          }
-        } else {
-          for (let i = 0; i < this.pickerData.length; i++) {
-            this.wheels[i].disable()
-          }
-        }
-      }
-    },
     methods: {
       confirm() {
         if (!this._canConfirm()) {
@@ -140,6 +113,40 @@
         this.hide()
         this.$emit(EVENT_CANCEL)
       },
+      show() {
+        if (this.isVisible) {
+          return
+        }
+
+        this.isVisible = true
+        if (!this.wheels || this.dirty) {
+          this.$nextTick(() => {
+            this.wheels = this.wheels || []
+            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
+          })
+        } else {
+          for (let i = 0; i < this.pickerData.length; i++) {
+            this.wheels[i].enable()
+            this.wheels[i].wheelTo(this.pickerSelectedIndex[i])
+          }
+        }
+      },
+      hide() {
+        if (!this.isVisible) {
+          return
+        }
+        this.isVisible = false
+
+        for (let i = 0; i < this.pickerData.length; i++) {
+          this.wheels[i].disable()
+        }
+      },
       setData(data, selectedIndex) {
         this.pickerSelectedIndex = selectedIndex ? [...selectedIndex] : []
         this.pickerData = data.slice()
diff --git a/src/components/segment-picker/segment-picker.vue b/src/components/segment-picker/segment-picker.vue
index aeb4eb204..2d6026194 100644
--- a/src/components/segment-picker/segment-picker.vue
+++ b/src/components/segment-picker/segment-picker.vue
@@ -67,7 +67,7 @@ export default {
   },
   computed: {
     currentPicker () {
-      // $refs is not responsive, should not use to computed or watch, so we import this.data to responsive.
+      // $refs is not reactive, should not use to computed or watch, so we import this.data to responsive.
       for (let i = 0; i < this.data.length; i++) {
         let item = this.$refs.pickers[i]
         if (item.$attrs.index === this.current) {
diff --git a/src/components/time-picker/time-picker.vue b/src/components/time-picker/time-picker.vue
index 6dfe4e0e2..1f5fce1c7 100644
--- a/src/components/time-picker/time-picker.vue
+++ b/src/components/time-picker/time-picker.vue
@@ -1,6 +1,7 @@
 <template>
   <cube-picker
     ref="picker"
+    v-model="isVisible"
     :title="title"
     :data="data"
     :selected-index="selectedIndex"
@@ -19,7 +20,7 @@
     HOUR_TIMESTAMP,
     MINUTE_TIMESTAMP
   } from '../../common/lang/date'
-  import apiMixin from '../../common/mixins/api'
+  import popupMixin from '../../common/mixins/popup'
   import CubePicker from '../picker/picker.vue'
 
   const DAY_STEP = 1
@@ -43,7 +44,7 @@
 
   export default {
     name: COMPONENT_NAME,
-    mixins: [apiMixin],
+    mixins: [popupMixin],
     props: {
       title: {
         type: String,
diff --git a/src/components/tip/tip.vue b/src/components/tip/tip.vue
index 5f9f947a7..98f31000b 100644
--- a/src/components/tip/tip.vue
+++ b/src/components/tip/tip.vue
@@ -10,7 +10,7 @@
   </transition>
 </template>
 <script type="text/ecmascript-6">
-  import apiMixin from '../../common/mixins/api'
+  import popupMixin from '../../common/mixins/popup'
 
   const COMPONENT_NAME = 'cube-tip'
   const EVENT_CLICK = 'click'
@@ -18,7 +18,7 @@
 
   export default {
     name: COMPONENT_NAME,
-    mixins: [apiMixin],
+    mixins: [popupMixin],
     props: {
       direction: {
         type: String,

From f7d9a4f68294a539b4a519454633c634133579e8 Mon Sep 17 00:00:00 2001
From: AmyFoxFN <funan_amy@foxmail.com>
Date: Fri, 20 Apr 2018 19:19:38 +0800
Subject: [PATCH 04/17] optimize: move z-index into popupMixin

---
 example/pages/cascade-picker.vue             | 16 ----------------
 src/common/mixins/picker.js                  |  3 ---
 src/common/mixins/popup.js                   |  4 ++++
 src/components/action-sheet/action-sheet.vue |  3 ---
 src/components/dialog/dialog.vue             |  3 ---
 src/components/popup/popup.vue               |  4 ----
 src/components/time-picker/time-picker.vue   | 12 ++++++------
 src/components/toast/toast.vue               |  1 +
 8 files changed, 11 insertions(+), 35 deletions(-)

diff --git a/example/pages/cascade-picker.vue b/example/pages/cascade-picker.vue
index 021def5b3..150cd36b1 100644
--- a/example/pages/cascade-picker.vue
+++ b/example/pages/cascade-picker.vue
@@ -4,7 +4,6 @@
       <cube-button-group>
         <cube-button @click="showCascadePicker">Cascade Picker</cube-button>
         <cube-button @click="showCityPicker">City Picker</cube-button>
-        <cube-button @click="showDatePicker">Date Picker</cube-button>
         <cube-button @click="showSetDataPicker">Set Data</cube-button>
       </cube-button-group>
     </div>
@@ -14,14 +13,9 @@
 <script>
   import CubePage from 'example/components/cube-page.vue'
   import CubeButtonGroup from 'example/components/cube-button-group.vue'
-  import DatePicker from 'example/components/date-picker.vue'
-  import Vue from 'vue'
-  import createAPI from '@/modules/create-api'
   import { provinceList, cityList, areaList } from 'example/data/area'
   import { cascadeData } from 'example/data/cascade'
 
-  createAPI(Vue, DatePicker, ['select', 'cancel'], false)
-
   const cityData = provinceList
   cityData.forEach(province => {
     province.children = cityList[province.value]
@@ -52,13 +46,6 @@
         onCancel: this.cancelHandle
       })
 
-      this.datePicker = this.$createDatePicker({
-        min: [2008, 8, 8],
-        max: [2020, 10, 20],
-        onSelect: this.selectHandle,
-        onCancel: this.cancelHandle
-      })
-
       this.setDataPicker = this.$createCascadePicker({
         title: 'Set Data',
         onSelect: this.selectHandle,
@@ -72,9 +59,6 @@
       showCityPicker() {
         this.cityPicker.show()
       },
-      showDatePicker() {
-        this.datePicker.show()
-      },
       showSetDataPicker() {
         /* setData when the picker is invisible */
         this.setDataPicker.setData(cascadeData)
diff --git a/src/common/mixins/picker.js b/src/common/mixins/picker.js
index eb45207b4..03742b43a 100644
--- a/src/common/mixins/picker.js
+++ b/src/common/mixins/picker.js
@@ -14,9 +14,6 @@ export default {
     swipeTime: {
       type: Number,
       default: 2500
-    },
-    zIndex: {
-      type: Number
     }
   }
 }
diff --git a/src/common/mixins/popup.js b/src/common/mixins/popup.js
index 67215af57..528c3929a 100644
--- a/src/common/mixins/popup.js
+++ b/src/common/mixins/popup.js
@@ -9,6 +9,10 @@ export default {
     visible: {
       type: Boolean,
       default: false
+    },
+    zIndex: {
+      type: Number,
+      default: 100
     }
   },
   data() {
diff --git a/src/components/action-sheet/action-sheet.vue b/src/components/action-sheet/action-sheet.vue
index b83a94459..48db46ed0 100644
--- a/src/components/action-sheet/action-sheet.vue
+++ b/src/components/action-sheet/action-sheet.vue
@@ -63,9 +63,6 @@
       pickerStyle: {
         type: Boolean,
         default: false
-      },
-      zIndex: {
-        type: Number
       }
     },
     methods: {
diff --git a/src/components/dialog/dialog.vue b/src/components/dialog/dialog.vue
index a4afc64b1..0145bfb8b 100644
--- a/src/components/dialog/dialog.vue
+++ b/src/components/dialog/dialog.vue
@@ -99,9 +99,6 @@
             ...defCancelBtn
           }
         }
-      },
-      zIndex: {
-        type: Number
       }
     },
     data() {
diff --git a/src/components/popup/popup.vue b/src/components/popup/popup.vue
index cb7330d27..f23168111 100644
--- a/src/components/popup/popup.vue
+++ b/src/components/popup/popup.vue
@@ -37,10 +37,6 @@
       center: {
         type: Boolean,
         default: true
-      },
-      zIndex: {
-        type: Number,
-        default: 100
       }
     },
     computed: {
diff --git a/src/components/time-picker/time-picker.vue b/src/components/time-picker/time-picker.vue
index 1f5fce1c7..a8d159414 100644
--- a/src/components/time-picker/time-picker.vue
+++ b/src/components/time-picker/time-picker.vue
@@ -2,11 +2,13 @@
   <cube-picker
     ref="picker"
     v-model="isVisible"
-    :title="title"
     :data="data"
     :selected-index="selectedIndex"
-    :z-index="zIndex"
+    :title="title"
+    :cancel-txt="cancelTxt"
+    :confirm-txt="confirmTxt"
     :swipe-time="swipeTime"
+    :z-index="zIndex"
     @select="_pickerSelect"
     @cancel="_pickerCancel"
     @change="_pickerChange"></cube-picker>
@@ -21,6 +23,7 @@
     MINUTE_TIMESTAMP
   } from '../../common/lang/date'
   import popupMixin from '../../common/mixins/popup'
+  import pickerMixin from '../../common/mixins/picker'
   import CubePicker from '../picker/picker.vue'
 
   const DAY_STEP = 1
@@ -44,7 +47,7 @@
 
   export default {
     name: COMPONENT_NAME,
-    mixins: [popupMixin],
+    mixins: [popupMixin, pickerMixin],
     props: {
       title: {
         type: String,
@@ -77,9 +80,6 @@
       minuteStep: {
         type: Number,
         default: MINUTE_STEP
-      },
-      zIndex: {
-        type: Number
       }
     },
     data() {
diff --git a/src/components/toast/toast.vue b/src/components/toast/toast.vue
index 8023b75c4..4541d4190 100644
--- a/src/components/toast/toast.vue
+++ b/src/components/toast/toast.vue
@@ -36,6 +36,7 @@
         type: Number,
         default: 3000
       },
+      // By default, Toast has the bigest z-index among popoup-based components.
       zIndex: {
         type: Number,
         default: 900

From 1e3744cf81a3e216774d6d5e005f3e2747bb6312 Mon Sep 17 00:00:00 2001
From: AmyFoxFN <funan_amy@foxmail.com>
Date: Mon, 23 Apr 2018 20:50:18 +0800
Subject: [PATCH 05/17] test

---
 src/common/mixins/popup.js                    | 10 ++++--
 src/components/picker/picker.vue              |  3 ++
 test/unit/specs/picker.spec.js                | 31 ++++++++++++++++
 .../specs/{poup.spec.js => popup.spec.js}     | 35 +++++++++++++++++++
 4 files changed, 76 insertions(+), 3 deletions(-)
 rename test/unit/specs/{poup.spec.js => popup.spec.js} (80%)

diff --git a/src/common/mixins/popup.js b/src/common/mixins/popup.js
index 528c3929a..2cd2ffbaa 100644
--- a/src/common/mixins/popup.js
+++ b/src/common/mixins/popup.js
@@ -19,12 +19,16 @@ export default {
     return {
       // If use the prop visible directly, the toggle will failed when user haven't set v-model as a reactive property.
       // So we use the data isVisible instead.
-      isVisible: this.visible
+      isVisible: undefined
     }
   },
   watch: {
-    visible(newVal) {
-      this.isVisible = newVal
+    visible: {
+      handler(newVal, oldVal) {
+        newVal && !oldVal && this.show()
+        oldVal && !newVal && this.hide()
+      },
+      immediate: true
     },
     isVisible(newVal) {
       this.$emit(EVENT_TOGGLE, newVal)
diff --git a/src/components/picker/picker.vue b/src/components/picker/picker.vue
index 63fbd2733..18f76e418 100644
--- a/src/components/picker/picker.vue
+++ b/src/components/picker/picker.vue
@@ -1,10 +1,13 @@
 <template>
   <transition name="cube-picker-fade">
+    <!-- If use v-model visible to toggle the popup, it will have a micro-delay caused by vue watch, so that the animation will be broken. -->
+    <!-- So we keep the visible true and use v-show to toggle the popup. -->
     <cube-popup
       type="picker"
       :mask="true"
       :center="false"
       :z-index="zIndex"
+      :visible="true"
       v-show="isVisible"
       @touchmove.prevent
       @mask-click="cancel">
diff --git a/test/unit/specs/picker.spec.js b/test/unit/specs/picker.spec.js
index 87a87aeca..e1c6dbc82 100644
--- a/test/unit/specs/picker.spec.js
+++ b/test/unit/specs/picker.spec.js
@@ -105,6 +105,37 @@ describe('Picker', () => {
       .to.equal('B')
   })
 
+  it('should toggle by change v-model visible', function (done) {
+    this.timeout(1000)
+
+    const toggleHandler = sinon.spy()
+    vm = instantiateComponent(Vue, Picker, {
+      props: {
+        visible: true
+      },
+      on: {
+        toggle: toggleHandler
+      }
+    })
+
+    vm.$parent.updateRenderData({
+      props: {
+        visible: false
+      },
+      on: {
+        toggle: toggleHandler
+      }
+    })
+
+    vm.$parent.$forceUpdate()
+
+    setTimeout(() => {
+      expect(toggleHandler).to.be.calledOnce
+
+      done()
+    }, 50)
+  })
+
   it('should trigger events', function () {
     this.timeout(10000)
 
diff --git a/test/unit/specs/poup.spec.js b/test/unit/specs/popup.spec.js
similarity index 80%
rename from test/unit/specs/poup.spec.js
rename to test/unit/specs/popup.spec.js
index 1d28132ec..adfb24eeb 100644
--- a/test/unit/specs/poup.spec.js
+++ b/test/unit/specs/popup.spec.js
@@ -11,11 +11,13 @@ describe('Popup', () => {
         vm = null
       }
     })
+
     it('use', () => {
       Vue.use(Popup)
       expect(Vue.component(Popup.name))
         .to.be.a('function')
     })
+
     it('should render correct contents - no type', () => {
       vm = instantiateComponent(Vue, Popup, {
         props: {
@@ -25,6 +27,7 @@ describe('Popup', () => {
       expect(vm.$el.className)
         .to.equal('cube-popup cube-popup_mask')
     })
+
     it('should render correct contents', () => {
       vm = instantiateComponent(Vue, Popup, {
         props: {
@@ -40,6 +43,38 @@ describe('Popup', () => {
       expect(vm.$el.querySelector('.cube-popup-content').innerHTML)
         .to.equal('popup content')
     })
+
+    it('should toggle by change v-model visible', function (done) {
+      this.timeout(1000)
+
+      const toggleHandler = sinon.spy()
+      vm = instantiateComponent(Vue, Popup, {
+        props: {
+          visible: true
+        },
+        on: {
+          toggle: toggleHandler
+        }
+      })
+
+      vm.$parent.updateRenderData({
+        props: {
+          visible: false
+        },
+        on: {
+          toggle: toggleHandler
+        }
+      })
+
+      vm.$parent.$forceUpdate()
+
+      setTimeout(() => {
+        expect(toggleHandler).to.be.calledOnce
+
+        done()
+      }, 50)
+    })
+
     it('events', () => {
       const clickHandler = sinon.spy()
       vm = instantiateComponent(Vue, Popup, {

From 6df8ab7844e446a92c69d50724d5e69b164b0bf5 Mon Sep 17 00:00:00 2001
From: AmyFoxFN <funan_amy@foxmail.com>
Date: Tue, 24 Apr 2018 11:15:54 +0800
Subject: [PATCH 06/17] doc

---
 document/components/docs/en-US/action-sheet.md   |  8 ++++++++
 document/components/docs/en-US/cascade-picker.md |  3 +++
 document/components/docs/en-US/date-picker.md    |  6 +++---
 document/components/docs/en-US/dialog.md         |  8 ++++++++
 document/components/docs/en-US/drawer.md         |  3 ++-
 document/components/docs/en-US/picker.md         |  5 +++--
 document/components/docs/en-US/popup.md          |  8 ++++++++
 document/components/docs/en-US/segment-picker.md |  4 ++--
 document/components/docs/en-US/time-picker.md    |  9 +++++++--
 document/components/docs/en-US/toast.md          |  8 ++++++++
 document/components/docs/zh-CN/action-sheet.md   |  8 ++++++++
 document/components/docs/zh-CN/cascade-picker.md |  3 +++
 document/components/docs/zh-CN/date-picker.md    | 12 ++++++------
 document/components/docs/zh-CN/dialog.md         |  8 ++++++++
 document/components/docs/zh-CN/drawer.md         |  3 ++-
 document/components/docs/zh-CN/picker.md         |  5 +++--
 document/components/docs/zh-CN/popup.md          |  8 ++++++++
 document/components/docs/zh-CN/segment-picker.md |  4 ++--
 document/components/docs/zh-CN/time-picker.md    |  9 +++++++--
 document/components/docs/zh-CN/toast.md          |  8 ++++++++
 20 files changed, 107 insertions(+), 23 deletions(-)

diff --git a/document/components/docs/en-US/action-sheet.md b/document/components/docs/en-US/action-sheet.md
index f34137ec4..392c21942 100644
--- a/document/components/docs/en-US/action-sheet.md
+++ b/document/components/docs/en-US/action-sheet.md
@@ -143,6 +143,7 @@ __Notice:__ Cause this component used create-api, so you should read [create-api
 | data | the data list to display | Array | - | [] |
 | active | the highlighted item's index | Number | - | -1 |
 | pickerStyle | Picker style | Boolean | true/false | false |
+| visible<sup>1.8.1</sup> | whether visible. Bind to `v-model` | Boolean | true/false | false |
 
 * `data` sub configuration
 
@@ -158,3 +159,10 @@ __Notice:__ Cause this component used create-api, so you should read [create-api
 | - | - | - | - |
 | cancel | triggers when clicking the cancel button | - | - |
 | select | triggers when clicking some item | the clicked item - data[index] | the index of the clicked item |
+
+### Instance methods
+
+| Method name | Description |
+| - | - |
+| show | show |
+| hide | hide |
diff --git a/document/components/docs/en-US/cascade-picker.md b/document/components/docs/en-US/cascade-picker.md
index e9602d786..6f9379df7 100644
--- a/document/components/docs/en-US/cascade-picker.md
+++ b/document/components/docs/en-US/cascade-picker.md
@@ -229,6 +229,7 @@ __Notice:__ Cause this component used create-api, so you should read [create-api
 | confirmTxt | the text of the confirm button | String | '确定' | - |
 | swipeTime | the duration of the momentum animation when user flicks the wheel of the picker, Unit: ms | Number | 2500 | - |
 | alias | configure the alias of `value` and `text`, used as same as the alias of `Picker` component | Object | {} | { value: 'id', text: 'name'} |
+| visible<sup>1.8.1</sup> | whether visible. Bind to `v-model` | Boolean | true/false | false |
 
 * `data` sub configuration
 
@@ -249,4 +250,6 @@ __Notice:__ Cause this component used create-api, so you should read [create-api
 
 | Method name | Description | Parameters 1 | Parameters 2 |
 | - | - | - | - |
+| show | show | - | - |
+| hide | hide | - | - |
 | setData | reset the cascading data and selected index | Array, the cascading data | Array, the indexes of selected item in each column |
diff --git a/document/components/docs/en-US/date-picker.md b/document/components/docs/en-US/date-picker.md
index bce35974b..ffa1c45f7 100644
--- a/document/components/docs/en-US/date-picker.md
+++ b/document/components/docs/en-US/date-picker.md
@@ -245,7 +245,7 @@ __Notice:__ Cause this component used create-api, so you should read [create-api
 | cancelTxt | the text of the cancel button | String | - | '取消' | - |
 | confirmTxt | the text of the confirm button | String | - | '确定' | - |
 | swipeTime | the duration of the momentum animation when user flicks the wheel of the picker, Unit: ms | Number | - | 2500 | - |
-| alias | configure the alias of `value` and `text` | Object | - | {} | { value: 'id', text: 'name'} |
+| visible<sup>1.8.1</sup> | whether visible. Bind to `v-model` | Boolean | true/false | false | - |
 
 * `format` sub configuration
 
@@ -270,5 +270,5 @@ __Notice:__ Cause this component used create-api, so you should read [create-api
 
 | Method name | Description |
 | - | - |
-| show | show picker |
-| hide | hide picker |
+| show | show |
+| hide | hide |
diff --git a/document/components/docs/en-US/dialog.md b/document/components/docs/en-US/dialog.md
index 664fcb574..3fa93a2b3 100644
--- a/document/components/docs/en-US/dialog.md
+++ b/document/components/docs/en-US/dialog.md
@@ -161,6 +161,7 @@ __Notice:__ Cause this component used create-api, so you should read [create-api
 | showClose | whether to show close button | Boolean | true/false | false |
 | confirmBtn | confirm button configuration | Object/String | - | { text: '确定', active: true, href: 'javascript:;' } |
 | cancelBtn | cancel button configuration | Object/String | - | { text: '取消', active: false, href: 'javascript:;' } |
+| visible<sup>1.8.1</sup> | whether visible. Bind to `v-model` | Boolean | true/false | false |
 
 * `confirmBtn` sub configuration
 
@@ -194,3 +195,10 @@ __Notice:__ Cause this component used create-api, so you should read [create-api
 | confirm | triggers when the confirm button is clicked | e - event target |
 | cancel | triggers when the cancel button is clicked | e - event target |
 | close | triggers when the close button is clicked | e - event target |
+
+### Instance methods
+
+| Method name | Description |
+| - | - |
+| show | show |
+| hide | hide |
diff --git a/document/components/docs/en-US/drawer.md b/document/components/docs/en-US/drawer.md
index ba3296f1f..f2c8f2f5c 100644
--- a/document/components/docs/en-US/drawer.md
+++ b/document/components/docs/en-US/drawer.md
@@ -151,6 +151,7 @@ __Notice:__ Drawer component's container element should be be a relative or abso
 | title | title | String | - | '' |
 | data | data source | Array | - | [] |
 | selected-index | initial selected index | Array | - | [] |
+| visible<sup>1.8.1</sup> | whether visible. Bind to `v-model` | Boolean | true/false | false |
 
 - `data` sub configuration
 
@@ -199,6 +200,6 @@ __Notice:__ Drawer component's container element should be be a relative or abso
 
 | Method name | Description | Parameters 1 | Parameters 2 | Parameters 3 |
 | - | - | - | - | - |
+| refill | refill data, change one Panel's data source | the Panel index | the data source | default selected index (Optional, recommended do not specify a value) |
 | show | show | - | - | - |
 | hide | hide | - | - | - |
-| refill | refill data, change one Panel's data source | the Panel index | the data source | default selected index (Optional, recommended do not specify a value) |
diff --git a/document/components/docs/en-US/picker.md b/document/components/docs/en-US/picker.md
index b5c71b9cd..2bac15c59 100644
--- a/document/components/docs/en-US/picker.md
+++ b/document/components/docs/en-US/picker.md
@@ -188,6 +188,7 @@ __Notice:__ Cause this component used create-api, so you should read [create-api
 | confirmTxt | the text of the confirm button | String | '确定' | - |
 | swipeTime | the duration of the momentum animation when user flicks the wheel of the picker, Unit: ms | Number | 2500 | - |
 | alias | configure the alias of `value` and `text` | Object | {} | { value: 'id', text: 'name'} |
+| visible<sup>1.8.1</sup> | whether visible. Bind to `v-model` | Boolean | true/false | false |
 
 * `data` sub configuration
 
@@ -210,5 +211,5 @@ __Notice:__ Cause this component used create-api, so you should read [create-api
 | Method name | Description | Parameters 1 | Parameters 2 |
 | - | - | - | - |
 | setData | set options in picker| Array, texts and values of options of each columns of picker | Array, indexes of selected item in each column of picker |
-| show | show picker | - | - |
-| hide | hide picker | - | - |
+| show | show | - | - |
+| hide | hide | - | - |
diff --git a/document/components/docs/en-US/popup.md b/document/components/docs/en-US/popup.md
index 764c26709..460534198 100644
--- a/document/components/docs/en-US/popup.md
+++ b/document/components/docs/en-US/popup.md
@@ -128,6 +128,7 @@ __Notice:__ All the components above used create-api, so you should read [create
 
 | Attribute | Description | Type | Accepted Values | Default |
 | - | - | - | - | - |
+| visible<sup>1.8.1</sup> | whether visible. Bind to `v-model` | Boolean | true/false | false |
 | type | the type of popup | String | - | '' |
 | mask | whether to show background layer | Boolean | true/false | true |
 | content | content, HTML string, valid when there's no slot | String | - | '' |
@@ -138,3 +139,10 @@ __Notice:__ All the components above used create-api, so you should read [create
 | Event Name | Description | Parameters |
 | - | - | - |
 | mask-click | triggers when the background layer is clicked | click event target |
+
+### Instance methods
+
+| Method name | Description |
+| - | - |
+| show | show |
+| hide | hide |
diff --git a/document/components/docs/en-US/segment-picker.md b/document/components/docs/en-US/segment-picker.md
index 105aad665..e9d11c6c0 100644
--- a/document/components/docs/en-US/segment-picker.md
+++ b/document/components/docs/en-US/segment-picker.md
@@ -151,5 +151,5 @@ __Notice:__ Cause this component used create-api, so you should read [create-api
 
 | Method name | Description |
 | - | - |
-| show | show picker |
-| hide | hide picker |
+| show | show |
+| hide | hide |
diff --git a/document/components/docs/en-US/time-picker.md b/document/components/docs/en-US/time-picker.md
index 2ebce3c59..46be554fe 100644
--- a/document/components/docs/en-US/time-picker.md
+++ b/document/components/docs/en-US/time-picker.md
@@ -143,12 +143,15 @@ __Notice:__ Cause this component used create-api, so you should read [create-api
 
 | Attribute | Description | Type | Default |
 | - | - | - | - |
-| title | title | String | '选择时间' |
-| swipeTime | the duration of the momentum animation when user flicks the wheel of the picker, Unit: ms | Number | 2500 |
 | delay | minutes that postponed backwards from now, which determines the minimal optional time| Number | 15 |
 | day | date configuration | Object | { len: 3, filter: ['今日'], format: 'M月d日' } |
 | showNow | whether to display current time | Boolean | true |
 | minuteStep | step of the minute | Number | 10 |
+| title | title | String | '选择时间' |
+| cancelTxt<sup>1.8.1</sup> | the text of the cancel button | String | '取消' |
+| confirmTxt<sup>1.8.1</sup> | the text of the confirm button | String | '确定' |
+| swipeTime | the duration of the momentum animation when user flicks the wheel of the picker, Unit: ms | Number | 2500 |
+| visible<sup>1.8.1</sup> | whether visible. Bind to `v-model` | Boolean | false |
 
 * `day` sub configuration
 
@@ -171,3 +174,5 @@ __Notice:__ Cause this component used create-api, so you should read [create-api
 | Method name | Description | Parameters |
 | - | - | - |
 | setTime | manually set time displayed in time-picker with with the time stamp as time format | time stamp |
+| show | show | - |
+| hide | hide | - |
diff --git a/document/components/docs/en-US/toast.md b/document/components/docs/en-US/toast.md
index 352dc4b24..c79360367 100644
--- a/document/components/docs/en-US/toast.md
+++ b/document/components/docs/en-US/toast.md
@@ -87,9 +87,17 @@ __Notice:__ Cause this component used create-api, so you should read [create-api
 | mask | whether to show mask layer | Boolean | true/false | false |
 | txt | tip text | String | - | '' |
 | time | display duration, millisecond | Number | - | 3000 |
+| visible<sup>1.8.1</sup> | whether visible. Bind to `v-model` | Boolean | true/false | false |
 
 ### Events
 
 | Event Name | Description |
 | - | - |
 | timeout | triggers when the display time is out |
+
+### Instance methods
+
+| Method name | Description |
+| - | - |
+| show | show |
+| hide | hide |
diff --git a/document/components/docs/zh-CN/action-sheet.md b/document/components/docs/zh-CN/action-sheet.md
index 9da1b3885..5c4b89efb 100644
--- a/document/components/docs/zh-CN/action-sheet.md
+++ b/document/components/docs/zh-CN/action-sheet.md
@@ -143,6 +143,7 @@ __注：__ 由于此组件基于 create-api 实现，所以在使用之前，请
 | data | 需要展示的数据列表 | Array | - | [] |
 | active | 高亮第几个选项 | Number | - | -1 |
 | pickerStyle | Picker 样式 | Boolean | true/false | false |
+| visible<sup>1.8.1</sup> | 显示状态，是否可见。`v-model`绑定值 | Boolean | true/false | false |
 
 * `data` 子配置项
 
@@ -158,3 +159,10 @@ __注：__ 由于此组件基于 create-api 实现，所以在使用之前，请
 | - | - | - | - |
 | cancel | 点击取消 | - | - |
 | select | 点击某项 | 点击项 item，即 data[index] | 点击项的索引值 index |
+
+### 实例方法
+
+| 方法名 | 说明 |
+| - | - |
+| show | 显示 |
+| hide | 隐藏 |
diff --git a/document/components/docs/zh-CN/cascade-picker.md b/document/components/docs/zh-CN/cascade-picker.md
index b89510cfa..79acd8495 100644
--- a/document/components/docs/zh-CN/cascade-picker.md
+++ b/document/components/docs/zh-CN/cascade-picker.md
@@ -219,6 +219,7 @@ __注：__ 由于此组件基于 create-api 实现，所以在使用之前，请
 | confirmTxt | 确定按钮文案 | String | '确定' | - |
 | swipeTime | 快速滑动选择器滚轮时，惯性滚动动画的时长，单位：ms | Number | 2500 | - |
 | alias | 配置`value`和`text`的别名，用法同`Picker`组件 | Object | {} | { value: 'id', text: 'name'} |
+| visible<sup>1.8.1</sup> | 显示状态，是否可见。`v-model`绑定值 | Boolean | false | false |
 
 * `data`子配置项
 
@@ -240,3 +241,5 @@ __注：__ 由于此组件基于 create-api 实现，所以在使用之前，请
 | 方法名 | 说明 | 参数1 | 参数2 |
 | - | - | - | - |
 | setData | 重置数据和选中的索引 | 级联树形数据结构，Array类型 | 每列选中的索引，Array类型 |
+| show | 显示 | - | - |
+| hide | 隐藏 | - | - |
diff --git a/document/components/docs/zh-CN/date-picker.md b/document/components/docs/zh-CN/date-picker.md
index 97c85e137..25557ae3c 100644
--- a/document/components/docs/zh-CN/date-picker.md
+++ b/document/components/docs/zh-CN/date-picker.md
@@ -241,11 +241,11 @@ __注：__ 由于此组件基于 create-api 实现，所以在使用之前，请
 | startColumn | 起始列 | String | year/month/date/hour/minute/second| year | hour |
 | columnCount | 列数 | Number | - | 3 | 6 |
 | format<sup>1.8.0+</sup> | 日期格式 | Object | - | { year: 'YYYY', month: 'M', date: 'D', hour: 'hh', minute: 'mm', second: 'ss' } | { year: 'YY年', month: 'MM月', date: '第 D 日' } |
-| title | 标题 | String | - | '' | - |
-| cancelTxt | 取消按钮文案 | String | - | '取消' | - |
-| confirmTxt | 确定按钮文案 | String | - | '确定' | - |
+| title | 标题 | String | - | '' | '时间选择' |
+| cancelTxt | 取消按钮文案 | String | - | '取消' | '返回' |
+| confirmTxt | 确定按钮文案 | String | - | '确定' | '选择' |
 | swipeTime | 快速滑动选择器滚轮时，惯性滚动动画的时长，单位：ms | Number | - | 2500 | - |
-| alias | 配置`value`和`text`的别名，用法同`Picker`组件 | Object | - | {} | { value: 'id', text: 'name'} |
+| visible<sup>1.8.1</sup> | 显示状态，是否可见。`v-model`绑定值 | Boolean | true/false | false | - |
 
 * `format` 子配置项
 
@@ -270,5 +270,5 @@ __注：__ 由于此组件基于 create-api 实现，所以在使用之前，请
 
 | 方法名 | 说明 |
 | - | - |
-| show | 显示选择器 |
-| hide | 隐藏选择器 |
+| show | 显示 |
+| hide | 隐藏 |
diff --git a/document/components/docs/zh-CN/dialog.md b/document/components/docs/zh-CN/dialog.md
index 24eb848d8..4a3a18fcd 100644
--- a/document/components/docs/zh-CN/dialog.md
+++ b/document/components/docs/zh-CN/dialog.md
@@ -161,6 +161,7 @@ __注：__ 由于此组件基于 create-api 实现，所以在使用之前，请
 | showClose | 是否显示关闭按钮 | Boolean | true/false | false |
 | confirmBtn | 确认按钮参数配置 | Object/String | - | { text: '确定', active: true, href: 'javascript:;' } |
 | cancelBtn | 取消按钮参数配置 | Object/String | - | { text: '取消', active: false, href: 'javascript:;' } |
+| visible<sup>1.8.1</sup> | 显示状态，是否可见。`v-model`绑定值 | Boolean | true/false | false |
 
 * `confirmBtn` 子配置项
 
@@ -194,3 +195,10 @@ __注：__ 由于此组件基于 create-api 实现，所以在使用之前，请
 | confirm | 点击确认按钮后触发 | 事件对象 e |
 | cancel | 点击取消按钮后触发 | 事件对象 e |
 | close | 点击关闭按钮后触发 | 事件对象 e |
+
+### 实例方法
+
+| 方法名 | 说明 |
+| - | - |
+| show | 显示 |
+| hide | 隐藏 |
diff --git a/document/components/docs/zh-CN/drawer.md b/document/components/docs/zh-CN/drawer.md
index 606adba1f..cd1e2d953 100644
--- a/document/components/docs/zh-CN/drawer.md
+++ b/document/components/docs/zh-CN/drawer.md
@@ -151,6 +151,7 @@ __注：__ 组件依赖父容器相对定位或者绝对定位，因为 Drawer 
 | title | 标题 | String | - | '' |
 | data | 数据源 | Array | - | [] |
 | selected-index | 初始选择索引 | Array | - | [] |
+| visible<sup>1.8.1</sup> | 显示状态，是否可见。`v-model`绑定值 | Boolean | true/false | false |
 
 - `data` 子配置项
 
@@ -201,6 +202,6 @@ __注：__ 组件依赖父容器相对定位或者绝对定位，因为 Drawer 
 
 | 方法名 | 说明 | 参数1 | 参数2 | 参数3 |
 | - | - | - | - | - |
+| refill | 填充数据，改变某个 Panel 数据 | 要改变的 Panel 的索引 | 填充数据 | 默认选中项（可选，建议不填） |
 | show | 显示 | - | - | - |
 | hide | 隐藏 | - | - | - |
-| refill | 填充数据，改变某个 Panel 数据 | 要改变的 Panel 的索引 | 填充数据 | 默认选中项（可选，建议不填） |
diff --git a/document/components/docs/zh-CN/picker.md b/document/components/docs/zh-CN/picker.md
index ba8f3084f..3c2fe24d3 100644
--- a/document/components/docs/zh-CN/picker.md
+++ b/document/components/docs/zh-CN/picker.md
@@ -188,6 +188,7 @@ __注：__ 由于此组件基于 create-api 实现，所以在使用之前，请
 | confirmTxt | 确定按钮文案 | String | '确定' | - |
 | swipeTime | 快速滑动 picker 滚轮时，惯性滚动动画的时长，单位：ms | Number | 2500 | - |
 | alias | 配置`value`和`text`的别名 | Object | {} | { value: 'id', text: 'name'} |
+| visible<sup>1.8.1</sup> | 显示状态，是否可见。`v-model`绑定值 | Boolean | true/false | false |
 
 * `data`子配置项
 
@@ -210,5 +211,5 @@ __注：__ 由于此组件基于 create-api 实现，所以在使用之前，请
 | 方法名 | 说明 | 参数1 | 参数2 |
 | - | - | - | - |
 | setData | 设置picker可选项 | picker每列可选项的文案和值，Array类型 | picker每列选中的索引，Array类型 |
-| show | 显示选择器 | - | - |
-| hide | 隐藏选择器 | - | - |
+| show | 显示 | - | - |
+| hide | 隐藏 | - | - |
diff --git a/document/components/docs/zh-CN/popup.md b/document/components/docs/zh-CN/popup.md
index a8e8513ca..3d0ddf6a9 100644
--- a/document/components/docs/zh-CN/popup.md
+++ b/document/components/docs/zh-CN/popup.md
@@ -115,6 +115,7 @@ __注：__ 以上组件都是基于 create-api 实现，所以在使用之前，
 
 | 参数 | 说明 | 类型 | 可选值 | 默认值 |
 | - | - | - | - | - |
+| visible<sup>1.8.1</sup> | 显示状态，是否可见。`v-model`绑定值 | Boolean | true/false | false |
 | type | 弹层类型 | String | - | '' |
 | mask | 是否显示背景层 | Boolean | true/false | true |
 | content | 内容，HTML 字符串，在无插槽的时候有效 | String | - | '' |
@@ -125,3 +126,10 @@ __注：__ 以上组件都是基于 create-api 实现，所以在使用之前，
 | 事件名 | 说明 | 参数 |
 | - | - | - |
 | mask-click | 背景层点击 | 点击事件对象 |
+
+### 实例方法
+
+| 方法名 | 说明 |
+| - | - |
+| show | 显示 |
+| hide | 隐藏 |
diff --git a/document/components/docs/zh-CN/segment-picker.md b/document/components/docs/zh-CN/segment-picker.md
index 52678a3ad..90f5b5b52 100644
--- a/document/components/docs/zh-CN/segment-picker.md
+++ b/document/components/docs/zh-CN/segment-picker.md
@@ -151,5 +151,5 @@ __注：__ 由于此组件基于 create-api 实现，所以在使用之前，请
 
 | 方法名 | 说明 |
 | - | - |
-| show | 显示选择器 |
-| hide | 隐藏选择器 |
+| show | 显示 |
+| hide | 隐藏 |
diff --git a/document/components/docs/zh-CN/time-picker.md b/document/components/docs/zh-CN/time-picker.md
index ea37a9649..b03bd3561 100644
--- a/document/components/docs/zh-CN/time-picker.md
+++ b/document/components/docs/zh-CN/time-picker.md
@@ -133,12 +133,15 @@ __注：__ 由于此组件基于 create-api 实现，所以在使用之前，请
 
 | 参数 | 说明 | 类型 | 默认值 |
 | - | - | - | - |
-| title | 标题 | String | '选择时间' |
-| swipeTime | 快速滑动选择器滚轮时，惯性滚动动画的时长，单位：ms | Number | 2500 |
 | delay | 将当前时间向后推算的分钟数，决定了最小可选时间 | Number | 15 |
 | day | 日期配置 | Object | { len: 3, filter: ['今日'], format: 'M月d日' } |
 | showNow | 是否显示当前时间 | Boolean | true |
 | minuteStep | 分钟数的步长 | Number | 10 |
+| title | 标题 | String | '选择时间' |
+| cancelTxt<sup>1.8.1</sup> | 取消按钮文案 | String | '取消' |
+| confirmTxt<sup>1.8.1</sup> | 确定按钮文案 | String | '确定' |
+| swipeTime | 快速滑动选择器滚轮时，惯性滚动动画的时长，单位：ms | Number | 2500 |
+| visible<sup>1.8.1</sup> | 显示状态，是否可见。`v-model`绑定值 | Boolean | false |
 
 * `day`子配置项
 
@@ -161,3 +164,5 @@ __注：__ 由于此组件基于 create-api 实现，所以在使用之前，请
 | 方法名 | 说明 | 参数 |
 | - | - | - |
 | setTime | 手动设置time-picker组件显示的时间，数据格式为时间戳 | 时间戳 |
+| show | 显示 | - |
+| hide | 隐藏 | - |
diff --git a/document/components/docs/zh-CN/toast.md b/document/components/docs/zh-CN/toast.md
index b89889e83..6c0b660ff 100644
--- a/document/components/docs/zh-CN/toast.md
+++ b/document/components/docs/zh-CN/toast.md
@@ -84,6 +84,7 @@ __注：__ 由于此组件基于 create-api 实现，所以在使用之前，请
 
 | 参数 | 说明 | 类型 | 可选值 | 默认值 |
 | - | - | - | - | - |
+| visible<sup>1.8.1</sup> | 显示状态，是否可见。`v-model`绑定值 | Boolean | true/false | false |
 | type | 类型(对应不同的 icon) | String | loading/correct/error/warn | loading |
 | mask | 遮罩 | Boolean | true/false | false |
 | txt | 提示信息 | String | - | '' |
@@ -94,3 +95,10 @@ __注：__ 由于此组件基于 create-api 实现，所以在使用之前，请
 | 事件名 | 说明 |
 | - | - |
 | timeout | 当显示时间结束时派发 |
+
+### 实例方法
+
+| 方法名 | 说明 |
+| - | - |
+| show | 显示 |
+| hide | 隐藏 |

From b6398fce7efbb02776944a19561a47ff182d4dcd Mon Sep 17 00:00:00 2001
From: AmyFoxFN <funan_amy@foxmail.com>
Date: Tue, 24 Apr 2018 14:06:09 +0800
Subject: [PATCH 07/17] [feat] segment-picker: mixin picker and popup

---
 .../components/docs/en-US/segment-picker.md   |  3 ++-
 .../components/docs/zh-CN/segment-picker.md   |  6 +++--
 .../segment-picker/segment-picker.vue         | 22 +++++++------------
 3 files changed, 14 insertions(+), 17 deletions(-)

diff --git a/document/components/docs/en-US/segment-picker.md b/document/components/docs/en-US/segment-picker.md
index e9d11c6c0..872bf937a 100644
--- a/document/components/docs/en-US/segment-picker.md
+++ b/document/components/docs/en-US/segment-picker.md
@@ -128,6 +128,8 @@ __Notice:__ Cause this component used create-api, so you should read [create-api
 | confirmTxt | the text of the confirm button | String | '确定' | - |
 | nextTxt | the text of the next button | String | '下一步' | - |
 | prevTxt | the text of the prev button | String | '下一步' | - |
+| swipeTime<sup>1.8.1</sup> | the duration of the momentum animation when user flicks the wheel of the picker, Unit: ms | Number | 2500 | - |
+| visible<sup>1.8.1</sup> | whether visible. Bind to `v-model` | Boolean | true/false | false |
 
 * `data` sub configuration
 
@@ -146,7 +148,6 @@ __Notice:__ Cause this component used create-api, so you should read [create-api
 | prev | triggers when clicking the prev button | the index of current picker, Number | - | - | - |
 | change | triggers when the roller scrolls | pickerIndex: Number, the index of current picker | index: Number, index of current scrolling roller | selectedIndex: Number, index of selected item in current column |
 
-
 ### Methods
 
 | Method name | Description |
diff --git a/document/components/docs/zh-CN/segment-picker.md b/document/components/docs/zh-CN/segment-picker.md
index 90f5b5b52..2ce960281 100644
--- a/document/components/docs/zh-CN/segment-picker.md
+++ b/document/components/docs/zh-CN/segment-picker.md
@@ -123,11 +123,13 @@ __注：__ 由于此组件基于 create-api 实现，所以在使用之前，请
 | 参数 | 说明 | 类型 | 默认值 | 示例 |
 | - | - | - | - | - |
 | data | 定义各个选择器的组件名和属性 | Array | [] | - |
+| nextTxt | 下一步按钮文案 | String | '下一步' | - |
+| prevTxt | 上一步按钮文案 | String | '下一步' | - |
 | title | 标题 | String | '' | - |
 | cancelTxt | 取消按钮文案 | String | '取消' | - |
 | confirmTxt | 确定按钮文案 | String | '确定' | - |
-| nextTxt | 下一步按钮文案 | String | '下一步' | - |
-| prevTxt | 上一步按钮文案 | String | '下一步' | - |
+| swipeTime<sup>1.8.1</sup> | 快速滑动选择器滚轮时，惯性滚动动画的时长，单位：ms | Number | 2500 | - |
+| visible<sup>1.8.1</sup> | 显示状态，是否可见。`v-model`绑定值 | Boolean | true/false | false |
 
 * `data` 子配置项
 
diff --git a/src/components/segment-picker/segment-picker.vue b/src/components/segment-picker/segment-picker.vue
index 2d6026194..a30779a86 100644
--- a/src/components/segment-picker/segment-picker.vue
+++ b/src/components/segment-picker/segment-picker.vue
@@ -9,8 +9,10 @@
       ref="pickers"
       :is="item.is || 'cube-picker'"
       :title="item.title || title"
-      :confirmTxt="item.confirmTxt || (index === data.length - 1 ? confirmTxt : nextTxt)"
-      :cancelTxt="item.cancelTxt || (index === 0 ? cancelTxt : prevTxt)"
+      :confirm-txt="item.confirmTxt || (index === data.length - 1 ? confirmTxt : nextTxt)"
+      :cancel-txt="item.cancelTxt || (index === 0 ? cancelTxt : prevTxt)"
+      :swipe-time="item.swipeTime || swipeTime"
+      :z-index="item.zIndex || zIndex"
       v-bind="item"
       @select="_select"
       @cancel="_cancel"
@@ -20,6 +22,9 @@
 </template>
 
 <script>
+import popupMixin from '../../common/mixins/popup'
+import pickerMixin from '../../common/mixins/picker'
+
 const COMPONENT_NAME = 'cube-segment-picker'
 const EVENT_NEXT = 'next'
 const EVENT_PREV = 'prev'
@@ -29,6 +34,7 @@ const EVENT_CHANGE = 'change'
 
 export default {
   name: COMPONENT_NAME,
+  mixins: [popupMixin, pickerMixin],
   props: {
     data: {
       type: Array,
@@ -36,18 +42,6 @@ export default {
         return []
       }
     },
-    title: {
-      type: String,
-      default: 'Segment Picker'
-    },
-    confirmTxt: {
-      type: String,
-      default: '确定'
-    },
-    cancelTxt: {
-      type: String,
-      default: '取消'
-    },
     nextTxt: {
       type: String,
       default: '下一步'

From 7ac2d5d9917bd803902c157726ef1ae941938962 Mon Sep 17 00:00:00 2001
From: AmyFoxFN <funan_amy@foxmail.com>
Date: Tue, 24 Apr 2018 16:23:38 +0800
Subject: [PATCH 08/17] [fix]: nest picker show, hide bug

---
 src/common/mixins/popup.js                    |  5 ++---
 .../cascade-picker/cascade-picker.vue         | 18 ++++++++++++++++--
 src/components/date-picker/date-picker.vue    | 18 ++++++++++++++++--
 .../segment-picker/segment-picker.vue         | 18 ++++++++++++++++--
 src/components/time-picker/time-picker.vue    | 19 +++++++++++++++++--
 5 files changed, 67 insertions(+), 11 deletions(-)

diff --git a/src/common/mixins/popup.js b/src/common/mixins/popup.js
index 2cd2ffbaa..5798b0510 100644
--- a/src/common/mixins/popup.js
+++ b/src/common/mixins/popup.js
@@ -19,14 +19,13 @@ export default {
     return {
       // If use the prop visible directly, the toggle will failed when user haven't set v-model as a reactive property.
       // So we use the data isVisible instead.
-      isVisible: undefined
+      isVisible: false
     }
   },
   watch: {
     visible: {
       handler(newVal, oldVal) {
-        newVal && !oldVal && this.show()
-        oldVal && !newVal && this.hide()
+        newVal ? this.show() : this.hide()
       },
       immediate: true
     },
diff --git a/src/components/cascade-picker/cascade-picker.vue b/src/components/cascade-picker/cascade-picker.vue
index f598e1a05..976eb1fac 100644
--- a/src/components/cascade-picker/cascade-picker.vue
+++ b/src/components/cascade-picker/cascade-picker.vue
@@ -40,10 +40,24 @@
     },
     methods: {
       show() {
-        this.$refs.picker.show()
+        if (this.isVisible) {
+          return
+        }
+        this.$refs.picker
+          ? this.$refs.picker.show()
+          : this.$nextTick(() => {
+            this.$refs.picker.show()
+          })
       },
       hide() {
-        this.$refs.picker.hide()
+        if (!this.isVisible) {
+          return
+        }
+        this.$refs.picker
+          ? this.$refs.picker.hide()
+          : this.$nextTick(() => {
+            this.$refs.picker.hide()
+          })
       },
       setData(data, selectedIndex = []) {
         this.cascadeData = data
diff --git a/src/components/date-picker/date-picker.vue b/src/components/date-picker/date-picker.vue
index b61e8df13..425b8dace 100644
--- a/src/components/date-picker/date-picker.vue
+++ b/src/components/date-picker/date-picker.vue
@@ -161,10 +161,24 @@
     },
     methods: {
       show() {
-        this.$refs.cascadePicker.show()
+        if (this.isVisible) {
+          return
+        }
+        this.$refs.cascadePicker
+          ? this.$refs.cascadePicker.show()
+          : this.$nextTick(() => {
+            this.$refs.cascadePicker.show()
+          })
       },
       hide() {
-        this.$refs.cascadePicker.hide()
+        if (!this.isVisible) {
+          return
+        }
+        this.$refs.cascadePicker
+          ? this.$refs.cascadePicker.hide()
+          : this.$nextTick(() => {
+            this.$refs.cascadePicker.hide()
+          })
       },
       _select(selectedVal, selectedIndex, selectedText) {
         this.$emit(EVENT_SELECT, this._arrayToDate(selectedVal), selectedVal, selectedText)
diff --git a/src/components/segment-picker/segment-picker.vue b/src/components/segment-picker/segment-picker.vue
index a30779a86..f1e178a17 100644
--- a/src/components/segment-picker/segment-picker.vue
+++ b/src/components/segment-picker/segment-picker.vue
@@ -80,10 +80,24 @@ export default {
   },
   methods: {
     show() {
-      this.data.length && this.currentPicker.show()
+      if (this.isVisible || !this.data.length) {
+        return
+      }
+      this.$refs.pickers
+        ? this.currentPicker.show()
+        : this.$nextTick(() => {
+          this.currentPicker.show()
+        })
     },
     hide() {
-      this.data.length && this.currentPicker.hide()
+      if (!this.isVisible || !this.data.length) {
+        return
+      }
+      this.$refs.pickers
+        ? this.$refs.currentPicker.hide()
+        : this.$nextTick(() => {
+          this.$refs.currentPicker.hide()
+        })
     },
     _select(...args) {
       this.selectedVal[this.current] = args[0]
diff --git a/src/components/time-picker/time-picker.vue b/src/components/time-picker/time-picker.vue
index a8d159414..b3eea4347 100644
--- a/src/components/time-picker/time-picker.vue
+++ b/src/components/time-picker/time-picker.vue
@@ -106,7 +106,15 @@
     },
     methods: {
       show() {
-        this.$refs.picker.show()
+        if (this.isVisible) {
+          return
+        }
+        this.$refs.picker
+          ? this.$refs.picker.show()
+          : this.$nextTick(() => {
+            this.$refs.picker.show()
+          })
+
         this._updateMinTime()
         this._initDays()
         this.today = this.days[0].value
@@ -118,7 +126,14 @@
         })
       },
       hide() {
-        this.$refs.picker.hide()
+        if (!this.isVisible) {
+          return
+        }
+        this.$refs.picker
+          ? this.$refs.picker.hide()
+          : this.$nextTick(() => {
+            this.$refs.picker.hide()
+          })
       },
       setTime(timeStamp) {
         this.selectedTimeStamp = parseInt(timeStamp)

From ad3f57399e21a4294d95930ae35cf385df83b79d Mon Sep 17 00:00:00 2001
From: AmyFoxFN <funan_amy@foxmail.com>
Date: Tue, 24 Apr 2018 17:48:37 +0800
Subject: [PATCH 09/17] [update]: use $watch when mounted

---
 src/common/mixins/popup.js                       | 16 ++++++++++------
 src/components/cascade-picker/cascade-picker.vue | 12 ++----------
 src/components/date-picker/date-picker.vue       | 12 ++----------
 src/components/picker/picker.vue                 |  9 +++++----
 src/components/segment-picker/segment-picker.vue | 12 ++----------
 src/components/time-picker/time-picker.vue       |  6 +-----
 6 files changed, 22 insertions(+), 45 deletions(-)

diff --git a/src/common/mixins/popup.js b/src/common/mixins/popup.js
index 5798b0510..0f34e02b7 100644
--- a/src/common/mixins/popup.js
+++ b/src/common/mixins/popup.js
@@ -23,19 +23,23 @@ export default {
     }
   },
   watch: {
-    visible: {
-      handler(newVal, oldVal) {
-        newVal ? this.show() : this.hide()
-      },
-      immediate: true
-    },
     isVisible(newVal) {
       this.$emit(EVENT_TOGGLE, newVal)
     }
   },
+  mounted() {
+    console.log(this.isVisible)
+    this.$watch('visible', (newVal) => {
+      console.log('visible', newVal)
+      newVal ? this.show() : this.hide()
+    }, {
+      immediate: true
+    })
+  },
   methods: {
     show() {
       this.isVisible = true
+      console.log('show')
     },
     hide() {
       this.isVisible = false
diff --git a/src/components/cascade-picker/cascade-picker.vue b/src/components/cascade-picker/cascade-picker.vue
index 976eb1fac..4a73b72bc 100644
--- a/src/components/cascade-picker/cascade-picker.vue
+++ b/src/components/cascade-picker/cascade-picker.vue
@@ -43,21 +43,13 @@
         if (this.isVisible) {
           return
         }
-        this.$refs.picker
-          ? this.$refs.picker.show()
-          : this.$nextTick(() => {
-            this.$refs.picker.show()
-          })
+        this.$refs.picker.show()
       },
       hide() {
         if (!this.isVisible) {
           return
         }
-        this.$refs.picker
-          ? this.$refs.picker.hide()
-          : this.$nextTick(() => {
-            this.$refs.picker.hide()
-          })
+        this.$refs.picker.hide()
       },
       setData(data, selectedIndex = []) {
         this.cascadeData = data
diff --git a/src/components/date-picker/date-picker.vue b/src/components/date-picker/date-picker.vue
index 425b8dace..b0e39c95f 100644
--- a/src/components/date-picker/date-picker.vue
+++ b/src/components/date-picker/date-picker.vue
@@ -164,21 +164,13 @@
         if (this.isVisible) {
           return
         }
-        this.$refs.cascadePicker
-          ? this.$refs.cascadePicker.show()
-          : this.$nextTick(() => {
-            this.$refs.cascadePicker.show()
-          })
+        this.$refs.cascadePicker.show()
       },
       hide() {
         if (!this.isVisible) {
           return
         }
-        this.$refs.cascadePicker
-          ? this.$refs.cascadePicker.hide()
-          : this.$nextTick(() => {
-            this.$refs.cascadePicker.hide()
-          })
+        this.$refs.cascadePicker.hide()
       },
       _select(selectedVal, selectedIndex, selectedText) {
         this.$emit(EVENT_SELECT, this._arrayToDate(selectedVal), selectedVal, selectedText)
diff --git a/src/components/picker/picker.vue b/src/components/picker/picker.vue
index 18f76e418..c09ad443c 100644
--- a/src/components/picker/picker.vue
+++ b/src/components/picker/picker.vue
@@ -1,14 +1,11 @@
 <template>
   <transition name="cube-picker-fade">
-    <!-- If use v-model visible to toggle the popup, it will have a micro-delay caused by vue watch, so that the animation will be broken. -->
-    <!-- So we keep the visible true and use v-show to toggle the popup. -->
     <cube-popup
       type="picker"
       :mask="true"
       :center="false"
       :z-index="zIndex"
-      :visible="true"
-      v-show="isVisible"
+      v-model="isVisible"
       @touchmove.prevent
       @mask-click="cancel">
       <transition name="cube-picker-move">
@@ -68,6 +65,9 @@
         }
       }
     },
+    mounted() {
+      console.log('picker isVisible', this.isVisible)
+    },
     methods: {
       confirm() {
         if (!this._canConfirm()) {
@@ -117,6 +117,7 @@
         this.$emit(EVENT_CANCEL)
       },
       show() {
+        console.log('picker show:', this.isVisible)
         if (this.isVisible) {
           return
         }
diff --git a/src/components/segment-picker/segment-picker.vue b/src/components/segment-picker/segment-picker.vue
index f1e178a17..a34562c30 100644
--- a/src/components/segment-picker/segment-picker.vue
+++ b/src/components/segment-picker/segment-picker.vue
@@ -83,21 +83,13 @@ export default {
       if (this.isVisible || !this.data.length) {
         return
       }
-      this.$refs.pickers
-        ? this.currentPicker.show()
-        : this.$nextTick(() => {
-          this.currentPicker.show()
-        })
+      this.currentPicker.show()
     },
     hide() {
       if (!this.isVisible || !this.data.length) {
         return
       }
-      this.$refs.pickers
-        ? this.$refs.currentPicker.hide()
-        : this.$nextTick(() => {
-          this.$refs.currentPicker.hide()
-        })
+      this.$refs.currentPicker.hide()
     },
     _select(...args) {
       this.selectedVal[this.current] = args[0]
diff --git a/src/components/time-picker/time-picker.vue b/src/components/time-picker/time-picker.vue
index b3eea4347..5ea9fa98b 100644
--- a/src/components/time-picker/time-picker.vue
+++ b/src/components/time-picker/time-picker.vue
@@ -109,11 +109,7 @@
         if (this.isVisible) {
           return
         }
-        this.$refs.picker
-          ? this.$refs.picker.show()
-          : this.$nextTick(() => {
-            this.$refs.picker.show()
-          })
+        this.$refs.picker.show()
 
         this._updateMinTime()
         this._initDays()

From ff00235ff29b5e8a56be9660ffe54f2b4c213251 Mon Sep 17 00:00:00 2001
From: AmyFoxFN <funan_amy@foxmail.com>
Date: Wed, 25 Apr 2018 12:06:39 +0800
Subject: [PATCH 10/17] [test] time-picker: don't use show and hide in a sync
 code block

---
 src/common/mixins/popup.js                 |  3 ---
 src/components/picker/picker.vue           |  4 ----
 src/components/time-picker/time-picker.vue |  6 +-----
 test/unit/specs/picker.spec.js             |  2 +-
 test/unit/specs/popup.spec.js              |  2 +-
 test/unit/specs/time-picker.spec.js        | 20 +++++++++++---------
 6 files changed, 14 insertions(+), 23 deletions(-)

diff --git a/src/common/mixins/popup.js b/src/common/mixins/popup.js
index 0f34e02b7..2d6af533d 100644
--- a/src/common/mixins/popup.js
+++ b/src/common/mixins/popup.js
@@ -28,9 +28,7 @@ export default {
     }
   },
   mounted() {
-    console.log(this.isVisible)
     this.$watch('visible', (newVal) => {
-      console.log('visible', newVal)
       newVal ? this.show() : this.hide()
     }, {
       immediate: true
@@ -39,7 +37,6 @@ export default {
   methods: {
     show() {
       this.isVisible = true
-      console.log('show')
     },
     hide() {
       this.isVisible = false
diff --git a/src/components/picker/picker.vue b/src/components/picker/picker.vue
index c09ad443c..66d686f32 100644
--- a/src/components/picker/picker.vue
+++ b/src/components/picker/picker.vue
@@ -65,9 +65,6 @@
         }
       }
     },
-    mounted() {
-      console.log('picker isVisible', this.isVisible)
-    },
     methods: {
       confirm() {
         if (!this._canConfirm()) {
@@ -117,7 +114,6 @@
         this.$emit(EVENT_CANCEL)
       },
       show() {
-        console.log('picker show:', this.isVisible)
         if (this.isVisible) {
           return
         }
diff --git a/src/components/time-picker/time-picker.vue b/src/components/time-picker/time-picker.vue
index 5ea9fa98b..ca01cd623 100644
--- a/src/components/time-picker/time-picker.vue
+++ b/src/components/time-picker/time-picker.vue
@@ -125,11 +125,7 @@
         if (!this.isVisible) {
           return
         }
-        this.$refs.picker
-          ? this.$refs.picker.hide()
-          : this.$nextTick(() => {
-            this.$refs.picker.hide()
-          })
+        this.$refs.picker.hide()
       },
       setTime(timeStamp) {
         this.selectedTimeStamp = parseInt(timeStamp)
diff --git a/test/unit/specs/picker.spec.js b/test/unit/specs/picker.spec.js
index e1c6dbc82..25ce2118b 100644
--- a/test/unit/specs/picker.spec.js
+++ b/test/unit/specs/picker.spec.js
@@ -130,7 +130,7 @@ describe('Picker', () => {
     vm.$parent.$forceUpdate()
 
     setTimeout(() => {
-      expect(toggleHandler).to.be.calledOnce
+      expect(toggleHandler).to.be.callCount(2)
 
       done()
     }, 50)
diff --git a/test/unit/specs/popup.spec.js b/test/unit/specs/popup.spec.js
index adfb24eeb..47d4fc69c 100644
--- a/test/unit/specs/popup.spec.js
+++ b/test/unit/specs/popup.spec.js
@@ -69,7 +69,7 @@ describe('Popup', () => {
       vm.$parent.$forceUpdate()
 
       setTimeout(() => {
-        expect(toggleHandler).to.be.calledOnce
+        expect(toggleHandler).to.be.callCount(2)
 
         done()
       }, 50)
diff --git a/test/unit/specs/time-picker.spec.js b/test/unit/specs/time-picker.spec.js
index 1399d3eaa..1471ca549 100644
--- a/test/unit/specs/time-picker.spec.js
+++ b/test/unit/specs/time-picker.spec.js
@@ -41,16 +41,18 @@ describe('TimePicker', () => {
       expect(secondWheelItem.textContent.trim())
         .to.equal('现在')
       vm.hide()
-      const nextDate = +new Date(Date.now() + 24 * 60 * 60 * 1000)
-      vm.setTime(nextDate)
-      vm.show()
       setTimeout(() => {
-        const wheel = vm.$el.querySelector('.cube-picker-wheel-wrapper > div > ul')
-        const transform = wheel.style.webkitTransform || wheel.style.transform
-        expect(transform.match(/translate\(0px,\s*(-?\d+)px\)/)[1])
-          .to.equal('-36')
-        done()
-      }, 100)
+        const nextDate = +new Date(Date.now() + 24 * 60 * 60 * 1000)
+        vm.setTime(nextDate)
+        vm.show()
+        setTimeout(() => {
+          const wheel = vm.$el.querySelector('.cube-picker-wheel-wrapper > div > ul')
+          const transform = wheel.style.webkitTransform || wheel.style.transform
+          expect(transform.match(/translate\(0px,\s*(-?\d+)px\)/)[1])
+            .to.equal('-36')
+          done()
+        }, 100)
+      })
     }, 100)
   })
 

From 91aab37a75d8eea1ee047116051380dbe67c15b5 Mon Sep 17 00:00:00 2001
From: AmyFoxFN <funan_amy@foxmail.com>
Date: Wed, 25 Apr 2018 14:41:24 +0800
Subject: [PATCH 11/17] [fix] picker: two animation sync

---
 src/components/picker/picker.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/picker/picker.vue b/src/components/picker/picker.vue
index 66d686f32..79acaa3c2 100644
--- a/src/components/picker/picker.vue
+++ b/src/components/picker/picker.vue
@@ -1,11 +1,14 @@
 <template>
   <transition name="cube-picker-fade">
+    <!-- If use v-model to toggle the popup, it will have a micro-delay caused by vue watch, so that the animation will be broken. -->
+    <!-- So we keep the v-model true and use v-show to toggle the popup. -->
     <cube-popup
       type="picker"
       :mask="true"
       :center="false"
       :z-index="zIndex"
-      v-model="isVisible"
+      :v-model="true"
+      v-show="isVisible"
       @touchmove.prevent
       @mask-click="cancel">
       <transition name="cube-picker-move">

From 9c02ca5eec579beb603cfaa68ae3acdf87dddd52 Mon Sep 17 00:00:00 2001
From: AmyFoxFN <funan_amy@foxmail.com>
Date: Wed, 25 Apr 2018 15:31:54 +0800
Subject: [PATCH 12/17] [optimize] pickers: remove needless show and hide

---
 src/components/cascade-picker/cascade-picker.vue | 12 ------------
 src/components/date-picker/date-picker.vue       | 13 -------------
 src/components/picker/picker.vue                 |  1 -
 src/components/time-picker/time-picker.vue       |  8 +-------
 4 files changed, 1 insertion(+), 33 deletions(-)

diff --git a/src/components/cascade-picker/cascade-picker.vue b/src/components/cascade-picker/cascade-picker.vue
index 4a73b72bc..8f1b2e228 100644
--- a/src/components/cascade-picker/cascade-picker.vue
+++ b/src/components/cascade-picker/cascade-picker.vue
@@ -39,18 +39,6 @@
       this._updatePickerData()
     },
     methods: {
-      show() {
-        if (this.isVisible) {
-          return
-        }
-        this.$refs.picker.show()
-      },
-      hide() {
-        if (!this.isVisible) {
-          return
-        }
-        this.$refs.picker.hide()
-      },
       setData(data, selectedIndex = []) {
         this.cascadeData = data
         this.pickerSelectedIndex = selectedIndex
diff --git a/src/components/date-picker/date-picker.vue b/src/components/date-picker/date-picker.vue
index b0e39c95f..6a8003b4d 100644
--- a/src/components/date-picker/date-picker.vue
+++ b/src/components/date-picker/date-picker.vue
@@ -1,6 +1,5 @@
 <template>
   <cube-cascade-picker
-    ref="cascadePicker"
     v-model="isVisible"
     :data="data"
     :selectedIndex="selectedIndex"
@@ -160,18 +159,6 @@
       }
     },
     methods: {
-      show() {
-        if (this.isVisible) {
-          return
-        }
-        this.$refs.cascadePicker.show()
-      },
-      hide() {
-        if (!this.isVisible) {
-          return
-        }
-        this.$refs.cascadePicker.hide()
-      },
       _select(selectedVal, selectedIndex, selectedText) {
         this.$emit(EVENT_SELECT, this._arrayToDate(selectedVal), selectedVal, selectedText)
       },
diff --git a/src/components/picker/picker.vue b/src/components/picker/picker.vue
index 79acaa3c2..479287f75 100644
--- a/src/components/picker/picker.vue
+++ b/src/components/picker/picker.vue
@@ -7,7 +7,6 @@
       :mask="true"
       :center="false"
       :z-index="zIndex"
-      :v-model="true"
       v-show="isVisible"
       @touchmove.prevent
       @mask-click="cancel">
diff --git a/src/components/time-picker/time-picker.vue b/src/components/time-picker/time-picker.vue
index ca01cd623..82570fade 100644
--- a/src/components/time-picker/time-picker.vue
+++ b/src/components/time-picker/time-picker.vue
@@ -109,7 +109,7 @@
         if (this.isVisible) {
           return
         }
-        this.$refs.picker.show()
+        this.isVisible = true
 
         this._updateMinTime()
         this._initDays()
@@ -121,12 +121,6 @@
           this._resetTime()
         })
       },
-      hide() {
-        if (!this.isVisible) {
-          return
-        }
-        this.$refs.picker.hide()
-      },
       setTime(timeStamp) {
         this.selectedTimeStamp = parseInt(timeStamp)
       },

From 4e4e59b8acd7d8db9b6aa7934b37d020e26f103b Mon Sep 17 00:00:00 2001
From: AmyFoxFN <funan_amy@foxmail.com>
Date: Wed, 25 Apr 2018 15:46:41 +0800
Subject: [PATCH 13/17] [optimize]: abstract visibilityMixin and popupMixin

---
 src/common/mixins/popup.js                    | 37 -----------------
 src/common/mixins/visibility.js               | 41 +++++++++++++++++++
 src/components/action-sheet/action-sheet.vue  |  3 +-
 .../cascade-picker/cascade-picker.vue         |  3 +-
 src/components/date-picker/date-picker.vue    |  3 +-
 src/components/dialog/dialog.vue              |  3 +-
 src/components/drawer/drawer-panel.vue        |  4 +-
 src/components/drawer/drawer.vue              |  3 +-
 src/components/picker/picker.vue              |  3 +-
 src/components/popup/popup.vue                |  3 +-
 .../segment-picker/segment-picker.vue         |  3 +-
 src/components/time-picker/time-picker.vue    |  3 +-
 src/components/tip/tip.vue                    |  4 +-
 src/components/toast/toast.vue                |  3 +-
 14 files changed, 65 insertions(+), 51 deletions(-)
 create mode 100644 src/common/mixins/visibility.js

diff --git a/src/common/mixins/popup.js b/src/common/mixins/popup.js
index 2d6af533d..226f73eac 100644
--- a/src/common/mixins/popup.js
+++ b/src/common/mixins/popup.js
@@ -1,45 +1,8 @@
-const EVENT_TOGGLE = 'toggle'
-
 export default {
-  model: {
-    prop: 'visible',
-    event: EVENT_TOGGLE
-  },
   props: {
-    visible: {
-      type: Boolean,
-      default: false
-    },
     zIndex: {
       type: Number,
       default: 100
     }
-  },
-  data() {
-    return {
-      // If use the prop visible directly, the toggle will failed when user haven't set v-model as a reactive property.
-      // So we use the data isVisible instead.
-      isVisible: false
-    }
-  },
-  watch: {
-    isVisible(newVal) {
-      this.$emit(EVENT_TOGGLE, newVal)
-    }
-  },
-  mounted() {
-    this.$watch('visible', (newVal) => {
-      newVal ? this.show() : this.hide()
-    }, {
-      immediate: true
-    })
-  },
-  methods: {
-    show() {
-      this.isVisible = true
-    },
-    hide() {
-      this.isVisible = false
-    }
   }
 }
diff --git a/src/common/mixins/visibility.js b/src/common/mixins/visibility.js
new file mode 100644
index 000000000..3e0b15644
--- /dev/null
+++ b/src/common/mixins/visibility.js
@@ -0,0 +1,41 @@
+const EVENT_TOGGLE = 'toggle'
+
+export default {
+  model: {
+    prop: 'visible',
+    event: EVENT_TOGGLE
+  },
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      // If use the prop visible directly, the toggle will failed when user haven't set v-model as a reactive property.
+      // So we use the data isVisible instead.
+      isVisible: false
+    }
+  },
+  watch: {
+    isVisible(newVal) {
+      this.$emit(EVENT_TOGGLE, newVal)
+    }
+  },
+  mounted() {
+    this.$watch('visible', (newVal) => {
+      newVal ? this.show() : this.hide()
+    }, {
+      immediate: true
+    })
+  },
+  methods: {
+    show() {
+      this.isVisible = true
+    },
+    hide() {
+      this.isVisible = false
+    }
+  }
+}
diff --git a/src/components/action-sheet/action-sheet.vue b/src/components/action-sheet/action-sheet.vue
index 48db46ed0..9f5263061 100644
--- a/src/components/action-sheet/action-sheet.vue
+++ b/src/components/action-sheet/action-sheet.vue
@@ -36,6 +36,7 @@
 
 <script type="text/ecmascript-6">
   import CubePopup from '../popup/popup.vue'
+  import visibilityMixin from '../../common/mixins/visibility'
   import popupMixin from '../../common/mixins/popup'
 
   const COMPONENT_NAME = 'cube-action-sheet'
@@ -44,7 +45,7 @@
 
   export default {
     name: COMPONENT_NAME,
-    mixins: [popupMixin],
+    mixins: [visibilityMixin, popupMixin],
     props: {
       data: {
         type: Array,
diff --git a/src/components/cascade-picker/cascade-picker.vue b/src/components/cascade-picker/cascade-picker.vue
index 8f1b2e228..223352da6 100644
--- a/src/components/cascade-picker/cascade-picker.vue
+++ b/src/components/cascade-picker/cascade-picker.vue
@@ -16,6 +16,7 @@
 
 <script type="text/ecmascript-6">
   import CubePicker from '../picker/picker.vue'
+  import visibilityMixin from '../../common/mixins/visibility'
   import popupMixin from '../../common/mixins/popup'
   import basicPickerMixin from '../../common/mixins/basic-picker'
   import pickerMixin from '../../common/mixins/picker'
@@ -27,7 +28,7 @@
 
   export default {
     name: COMPONENT_NAME,
-    mixins: [popupMixin, basicPickerMixin, pickerMixin],
+    mixins: [visibilityMixin, popupMixin, basicPickerMixin, pickerMixin],
     data () {
       return {
         cascadeData: this.data.slice(),
diff --git a/src/components/date-picker/date-picker.vue b/src/components/date-picker/date-picker.vue
index 6a8003b4d..2e4ce0053 100644
--- a/src/components/date-picker/date-picker.vue
+++ b/src/components/date-picker/date-picker.vue
@@ -15,6 +15,7 @@
 </template>
 
 <script>
+  import visibilityMixin from '../../common/mixins/visibility'
   import popupMixin from '../../common/mixins/popup'
   import pickerMixin from '../../common/mixins/picker'
   import { deepAssign, findIndex } from '../../common/helpers/util'
@@ -60,7 +61,7 @@
 
   export default {
     name: COMPONENT_NAME,
-    mixins: [popupMixin, pickerMixin],
+    mixins: [visibilityMixin, popupMixin, pickerMixin],
     props: {
       min: {
         type: [Date, Array],
diff --git a/src/components/dialog/dialog.vue b/src/components/dialog/dialog.vue
index 0145bfb8b..f0cf88d66 100644
--- a/src/components/dialog/dialog.vue
+++ b/src/components/dialog/dialog.vue
@@ -31,6 +31,7 @@
 
 <script type="text/ecmascript-6">
   import CubePopup from '../popup/popup.vue'
+  import visibilityMixin from '../../common/mixins/visibility'
   import popupMixin from '../../common/mixins/popup'
 
   const COMPONENT_NAME = 'cube-dialog'
@@ -62,7 +63,7 @@
 
   export default {
     name: COMPONENT_NAME,
-    mixins: [popupMixin],
+    mixins: [visibilityMixin, popupMixin],
     props: {
       type: {
         type: String,
diff --git a/src/components/drawer/drawer-panel.vue b/src/components/drawer/drawer-panel.vue
index 3ebca4597..f17630ea7 100644
--- a/src/components/drawer/drawer-panel.vue
+++ b/src/components/drawer/drawer-panel.vue
@@ -13,7 +13,7 @@
 </template>
 
 <script type="text/ecmascript-6">
-  import popupMixin from '../../common/mixins/popup'
+  import visibilityMixin from '../../common/mixins/visibility'
   import CubeScroll from '../scroll/scroll.vue'
   import CubeDrawerItem from './drawer-item.vue'
 
@@ -21,7 +21,7 @@
 
   export default {
     name: COMPONENT_NAME,
-    mixins: [popupMixin],
+    mixins: [visibilityMixin],
     props: {
       data: {
         type: Array,
diff --git a/src/components/drawer/drawer.vue b/src/components/drawer/drawer.vue
index cc5930caf..f7ba8d068 100644
--- a/src/components/drawer/drawer.vue
+++ b/src/components/drawer/drawer.vue
@@ -20,6 +20,7 @@
 <script type="text/ecmascript-6">
   import { prefixStyle } from '../../common/helpers/dom'
   import CubeDrawerPanel from './drawer-panel.vue'
+  import visibilityMixin from '../../common/mixins/visibility'
   import popupMixin from '../../common/mixins/popup'
 
   const COMPONENT_NAME = 'cube-drawer'
@@ -31,7 +32,7 @@
 
   export default {
     name: COMPONENT_NAME,
-    mixins: [popupMixin],
+    mixins: [visibilityMixin, popupMixin],
     props: {
       title: {
         type: String,
diff --git a/src/components/picker/picker.vue b/src/components/picker/picker.vue
index 479287f75..f103d61f8 100644
--- a/src/components/picker/picker.vue
+++ b/src/components/picker/picker.vue
@@ -38,6 +38,7 @@
 <script type="text/ecmascript-6">
   import BScroll from 'better-scroll'
   import CubePopup from '../popup/popup.vue'
+  import visibilityMixin from '../../common/mixins/visibility'
   import popupMixin from '../../common/mixins/popup'
   import basicPickerMixin from '../../common/mixins/basic-picker'
   import pickerMixin from '../../common/mixins/picker'
@@ -51,7 +52,7 @@
 
   export default {
     name: COMPONENT_NAME,
-    mixins: [popupMixin, basicPickerMixin, pickerMixin],
+    mixins: [visibilityMixin, popupMixin, basicPickerMixin, pickerMixin],
     data() {
       return {
         pickerData: this.data.slice(),
diff --git a/src/components/popup/popup.vue b/src/components/popup/popup.vue
index f23168111..7bad49f09 100644
--- a/src/components/popup/popup.vue
+++ b/src/components/popup/popup.vue
@@ -14,13 +14,14 @@
 </template>
 
 <script type="text/ecmascript-6">
+  import visibilityMixin from '../../common/mixins/visibility'
   import popupMixin from '../../common/mixins/popup'
   const COMPONENT_NAME = 'cube-popup'
   const EVENT_MASK_CLICK = 'mask-click'
 
   export default {
     name: COMPONENT_NAME,
-    mixins: [popupMixin],
+    mixins: [visibilityMixin, popupMixin],
     props: {
       type: {
         type: String,
diff --git a/src/components/segment-picker/segment-picker.vue b/src/components/segment-picker/segment-picker.vue
index a34562c30..91e31cb38 100644
--- a/src/components/segment-picker/segment-picker.vue
+++ b/src/components/segment-picker/segment-picker.vue
@@ -22,6 +22,7 @@
 </template>
 
 <script>
+import visibilityMixin from '../../common/mixins/visibility'
 import popupMixin from '../../common/mixins/popup'
 import pickerMixin from '../../common/mixins/picker'
 
@@ -34,7 +35,7 @@ const EVENT_CHANGE = 'change'
 
 export default {
   name: COMPONENT_NAME,
-  mixins: [popupMixin, pickerMixin],
+  mixins: [visibilityMixin, popupMixin, pickerMixin],
   props: {
     data: {
       type: Array,
diff --git a/src/components/time-picker/time-picker.vue b/src/components/time-picker/time-picker.vue
index 82570fade..7c0df1dfe 100644
--- a/src/components/time-picker/time-picker.vue
+++ b/src/components/time-picker/time-picker.vue
@@ -22,6 +22,7 @@
     HOUR_TIMESTAMP,
     MINUTE_TIMESTAMP
   } from '../../common/lang/date'
+  import visibilityMixin from '../../common/mixins/visibility'
   import popupMixin from '../../common/mixins/popup'
   import pickerMixin from '../../common/mixins/picker'
   import CubePicker from '../picker/picker.vue'
@@ -47,7 +48,7 @@
 
   export default {
     name: COMPONENT_NAME,
-    mixins: [popupMixin, pickerMixin],
+    mixins: [visibilityMixin, popupMixin, pickerMixin],
     props: {
       title: {
         type: String,
diff --git a/src/components/tip/tip.vue b/src/components/tip/tip.vue
index 98f31000b..2a0a91f27 100644
--- a/src/components/tip/tip.vue
+++ b/src/components/tip/tip.vue
@@ -10,7 +10,7 @@
   </transition>
 </template>
 <script type="text/ecmascript-6">
-  import popupMixin from '../../common/mixins/popup'
+  import visibilityMixin from '../../common/mixins/visibility'
 
   const COMPONENT_NAME = 'cube-tip'
   const EVENT_CLICK = 'click'
@@ -18,7 +18,7 @@
 
   export default {
     name: COMPONENT_NAME,
-    mixins: [popupMixin],
+    mixins: [visibilityMixin],
     props: {
       direction: {
         type: String,
diff --git a/src/components/toast/toast.vue b/src/components/toast/toast.vue
index 4541d4190..b5d76246b 100644
--- a/src/components/toast/toast.vue
+++ b/src/components/toast/toast.vue
@@ -10,6 +10,7 @@
 <script type="text/ecmascript-6">
   import CubeLoading from '../loading/loading.vue'
   import CubePopup from '../popup/popup.vue'
+  import visibilityMixin from '../../common/mixins/visibility'
   import popupMixin from '../../common/mixins/popup'
 
   const COMPONENT_NAME = 'cube-toast'
@@ -18,7 +19,7 @@
 
   export default {
     name: COMPONENT_NAME,
-    mixins: [popupMixin],
+    mixins: [visibilityMixin, popupMixin],
     props: {
       type: {
         type: String,

From bc920322af39f3555481848d2e1b7cb3b73c7507 Mon Sep 17 00:00:00 2001
From: AmyFoxFN <funan_amy@foxmail.com>
Date: Wed, 25 Apr 2018 16:13:49 +0800
Subject: [PATCH 14/17] [fix] drawer: animation bug

---
 src/components/drawer/drawer.vue | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/components/drawer/drawer.vue b/src/components/drawer/drawer.vue
index f7ba8d068..c1b720ce0 100644
--- a/src/components/drawer/drawer.vue
+++ b/src/components/drawer/drawer.vue
@@ -80,7 +80,11 @@
     },
     methods: {
       show() {
+        if (this.isVisible) {
+          return
+        }
         this.isVisible = true
+
         let len = this.data.length
         for (let i = 0; i < len; i++) {
           this.index = i
@@ -96,6 +100,10 @@
         this.computedStyle()
       },
       hide() {
+        if (!this.isVisible) {
+          return
+        }
+
         this.slideStyle[transform] = 'translate3d(0, 0, 0)'
         this.shouldHide = true
       },

From 7b6e2cfd278e7112143d7d79f6a5ba826ecf03aa Mon Sep 17 00:00:00 2001
From: AmyFoxFN <funan_amy@foxmail.com>
Date: Wed, 25 Apr 2018 16:29:21 +0800
Subject: [PATCH 15/17] [optimize] don't call hide when first watch

---
 src/common/mixins/visibility.js  | 4 ++--
 src/components/drawer/drawer.vue | 4 ----
 2 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/common/mixins/visibility.js b/src/common/mixins/visibility.js
index 3e0b15644..12bd93f59 100644
--- a/src/common/mixins/visibility.js
+++ b/src/common/mixins/visibility.js
@@ -24,8 +24,8 @@ export default {
     }
   },
   mounted() {
-    this.$watch('visible', (newVal) => {
-      newVal ? this.show() : this.hide()
+    this.$watch('visible', (newVal, oldVal) => {
+      newVal ? this.show() : oldVal && this.hide()
     }, {
       immediate: true
     })
diff --git a/src/components/drawer/drawer.vue b/src/components/drawer/drawer.vue
index c1b720ce0..2173c1327 100644
--- a/src/components/drawer/drawer.vue
+++ b/src/components/drawer/drawer.vue
@@ -100,10 +100,6 @@
         this.computedStyle()
       },
       hide() {
-        if (!this.isVisible) {
-          return
-        }
-
         this.slideStyle[transform] = 'translate3d(0, 0, 0)'
         this.shouldHide = true
       },

From ca0eb7f4f93f67314a2421d2e8dc4c5c2478d152 Mon Sep 17 00:00:00 2001
From: AmyFoxFN <funan_amy@foxmail.com>
Date: Wed, 25 Apr 2018 16:39:56 +0800
Subject: [PATCH 16/17] [update]

---
 test/unit/specs/picker.spec.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/test/unit/specs/picker.spec.js b/test/unit/specs/picker.spec.js
index 25ce2118b..4cf121861 100644
--- a/test/unit/specs/picker.spec.js
+++ b/test/unit/specs/picker.spec.js
@@ -126,7 +126,6 @@ describe('Picker', () => {
         toggle: toggleHandler
       }
     })
-
     vm.$parent.$forceUpdate()
 
     setTimeout(() => {

From d4f074b5a54471358d54defdd5d855a64a370ddc Mon Sep 17 00:00:00 2001
From: AmyFoxFN <funan_amy@foxmail.com>
Date: Wed, 25 Apr 2018 16:50:47 +0800
Subject: [PATCH 17/17] [update] : indent

---
 .../segment-picker/segment-picker.vue         | 164 +++++++++---------
 1 file changed, 82 insertions(+), 82 deletions(-)

diff --git a/src/components/segment-picker/segment-picker.vue b/src/components/segment-picker/segment-picker.vue
index 91e31cb38..93f93ce1d 100644
--- a/src/components/segment-picker/segment-picker.vue
+++ b/src/components/segment-picker/segment-picker.vue
@@ -22,102 +22,102 @@
 </template>
 
 <script>
-import visibilityMixin from '../../common/mixins/visibility'
-import popupMixin from '../../common/mixins/popup'
-import pickerMixin from '../../common/mixins/picker'
+  import visibilityMixin from '../../common/mixins/visibility'
+  import popupMixin from '../../common/mixins/popup'
+  import pickerMixin from '../../common/mixins/picker'
 
-const COMPONENT_NAME = 'cube-segment-picker'
-const EVENT_NEXT = 'next'
-const EVENT_PREV = 'prev'
-const EVENT_SELECT = 'select'
-const EVENT_CANCEL = 'cancel'
-const EVENT_CHANGE = 'change'
+  const COMPONENT_NAME = 'cube-segment-picker'
+  const EVENT_NEXT = 'next'
+  const EVENT_PREV = 'prev'
+  const EVENT_SELECT = 'select'
+  const EVENT_CANCEL = 'cancel'
+  const EVENT_CHANGE = 'change'
 
-export default {
-  name: COMPONENT_NAME,
-  mixins: [visibilityMixin, popupMixin, pickerMixin],
-  props: {
-    data: {
-      type: Array,
-      default() {
-        return []
-      }
-    },
-    nextTxt: {
-      type: String,
-      default: '下一步'
-    },
-    prevTxt: {
-      type: String,
-      default: '上一步'
-    }
-  },
-  data() {
-    return {
-      current: 0,
-      selectedVal: [],
-      selectedIndex: [],
-      selectedText: []
-    }
-  },
-  computed: {
-    currentPicker () {
-      // $refs is not reactive, should not use to computed or watch, so we import this.data to responsive.
-      for (let i = 0; i < this.data.length; i++) {
-        let item = this.$refs.pickers[i]
-        if (item.$attrs.index === this.current) {
-          return item
+  export default {
+    name: COMPONENT_NAME,
+    mixins: [visibilityMixin, popupMixin, pickerMixin],
+    props: {
+      data: {
+        type: Array,
+        default() {
+          return []
         }
+      },
+      nextTxt: {
+        type: String,
+        default: '下一步'
+      },
+      prevTxt: {
+        type: String,
+        default: '上一步'
       }
-    }
-  },
-  watch: {
+    },
     data() {
-      this.current = 0
-      this.selectedVal = []
-      this.selectedIndex = []
-      this.selectedText = []
-    }
-  },
-  methods: {
-    show() {
-      if (this.isVisible || !this.data.length) {
-        return
+      return {
+        current: 0,
+        selectedVal: [],
+        selectedIndex: [],
+        selectedText: []
       }
-      this.currentPicker.show()
     },
-    hide() {
-      if (!this.isVisible || !this.data.length) {
-        return
+    computed: {
+      currentPicker () {
+        // $refs is not reactive, should not use to computed or watch, so we import this.data to responsive.
+        for (let i = 0; i < this.data.length; i++) {
+          let item = this.$refs.pickers[i]
+          if (item.$attrs.index === this.current) {
+            return item
+          }
+        }
       }
-      this.$refs.currentPicker.hide()
     },
-    _select(...args) {
-      this.selectedVal[this.current] = args[0]
-      this.selectedIndex[this.current] = args[1]
-      this.selectedText[this.current] = args[2]
-
-      if (this.current < this.data.length - 1) {
-        this.$emit(EVENT_NEXT, this.current, ...args)
-        this.current++
-        this.currentPicker.show()
-      } else {
-        this.$emit(EVENT_SELECT, this.selectedVal, this.selectedIndex, this.selectedText)
+    watch: {
+      data() {
         this.current = 0
+        this.selectedVal = []
+        this.selectedIndex = []
+        this.selectedText = []
       }
     },
-    _cancel(...args) {
-      if (this.current > 0) {
-        this.$emit(EVENT_PREV, this.current, ...args)
-        this.current--
+    methods: {
+      show() {
+        if (this.isVisible || !this.data.length) {
+          return
+        }
         this.currentPicker.show()
-      } else {
-        this.$emit(EVENT_CANCEL)
+      },
+      hide() {
+        if (!this.isVisible || !this.data.length) {
+          return
+        }
+        this.$refs.currentPicker.hide()
+      },
+      _select(...args) {
+        this.selectedVal[this.current] = args[0]
+        this.selectedIndex[this.current] = args[1]
+        this.selectedText[this.current] = args[2]
+
+        if (this.current < this.data.length - 1) {
+          this.$emit(EVENT_NEXT, this.current, ...args)
+          this.current++
+          this.currentPicker.show()
+        } else {
+          this.$emit(EVENT_SELECT, this.selectedVal, this.selectedIndex, this.selectedText)
+          this.current = 0
+        }
+      },
+      _cancel(...args) {
+        if (this.current > 0) {
+          this.$emit(EVENT_PREV, this.current, ...args)
+          this.current--
+          this.currentPicker.show()
+        } else {
+          this.$emit(EVENT_CANCEL)
+        }
+      },
+      _change(...args) {
+        this.$emit(EVENT_CHANGE, this.current, ...args)
       }
-    },
-    _change(...args) {
-      this.$emit(EVENT_CHANGE, this.current, ...args)
     }
   }
-}
 </script>