[feat] Popup-based: toggle by v-model (#173)

* feat(popups): use v-model to toggle

* [optimize]: abstract visibilityMixin and popupMixin

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 |

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 |

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 |

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 |

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) |

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 | - | - |

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 |

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,10 +148,9 @@ __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 |
 | - | - |
-| show | show picker |
-| hide | hide picker |
+| show | show |
+| hide | hide |

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 | - |

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 |

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 | 隐藏 |

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 | 隐藏 | - | - |

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 | 隐藏 |

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 | 隐藏 |

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 的索引 | 填充数据 | 默认选中项（可选，建议不填） |

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 | 隐藏 | - | - |

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 | 隐藏 |

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` 子配置项
 
@@ -151,5 +153,5 @@ __注：__ 由于此组件基于 create-api 实现，所以在使用之前，请
 
 | 方法名 | 说明 |
 | - | - |
-| show | 显示选择器 |
-| hide | 隐藏选择器 |
+| show | 显示 |
+| hide | 隐藏 |

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 | 隐藏 | - |

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 | 隐藏 |

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'
 

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)

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)
       }
     },

src/common/mixins/api.js

-export default {
-  data() {
-    return {
-      isVisible: false
-    }
-  },
-  methods: {
-    show() {
-      this.isVisible = true
-    },
-    hide() {
-      this.isVisible = false
-    }
-  }
-}

src/common/mixins/picker.js

@@ -14,9 +14,6 @@ export default {
     swipeTime: {
       type: Number,
       default: 2500
-    },
-    zIndex: {
-      type: Number
     }
   }
 }

src/common/mixins/popup.js

+export default {
+  props: {
+    zIndex: {
+      type: Number,
+      default: 100
+    }
+  }
+}

src/common/mixins/visibility.js

+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, oldVal) => {
+      newVal ? this.show() : oldVal && this.hide()
+    }, {
+      immediate: true
+    })
+  },
+  methods: {
+    show() {
+      this.isVisible = true
+    },
+    hide() {
+      this.isVisible = false
+    }
+  }
+}

src/components/action-sheet/action-sheet.vue

@@ -36,7 +36,8 @@
 
 <script type="text/ecmascript-6">
   import CubePopup from '../popup/popup.vue'
-  import apiMixin from '../../common/mixins/api'
+  import visibilityMixin from '../../common/mixins/visibility'
+  import popupMixin from '../../common/mixins/popup'
 
   const COMPONENT_NAME = 'cube-action-sheet'
   const EVENT_SELECT = 'select'
@@ -44,7 +45,7 @@
 
   export default {
     name: COMPONENT_NAME,
-    mixins: [apiMixin],
+    mixins: [visibilityMixin, popupMixin],
     props: {
       data: {
         type: Array,
@@ -63,9 +64,6 @@
       pickerStyle: {
         type: Boolean,
         default: false
-      },
-      zIndex: {
-        type: Number
       }
     },
     methods: {

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

 <template>
   <cube-picker
       ref="picker"
+      v-model="isVisible"
       :data="pickerData"
       :selected-index="pickerSelectedIndex"
       :title="title"
@@ -15,7 +16,8 @@
 
 <script type="text/ecmascript-6">
   import CubePicker from '../picker/picker.vue'
-  import apiMixin from '../../common/mixins/api'
+  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'
 
@@ -26,7 +28,7 @@
 
   export default {
     name: COMPONENT_NAME,
-    mixins: [apiMixin, basicPickerMixin, pickerMixin],
+    mixins: [visibilityMixin, popupMixin, basicPickerMixin, pickerMixin],
     data () {
       return {
         cascadeData: this.data.slice(),
@@ -38,12 +40,6 @@
       this._updatePickerData()
     },
     methods: {
-      show() {
-        this.$refs.picker.show()
-      },
-      hide() {
-        this.$refs.picker.hide()
-      },
       setData(data, selectedIndex = []) {
         this.cascadeData = data
         this.pickerSelectedIndex = selectedIndex

src/components/date-picker/date-picker.vue

 <template>
   <cube-cascade-picker
-    ref="cascadePicker"
+    v-model="isVisible"
     :data="data"
     :selectedIndex="selectedIndex"
     :title="title"
@@ -15,7 +15,8 @@
 </template>
 
 <script>
-  import apiMixin from '../../common/mixins/api'
+  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'
   import { computeNatureMaxDay, formatType } from '../../common/lang/date'
@@ -60,7 +61,7 @@
 
   export default {
     name: COMPONENT_NAME,
-    mixins: [apiMixin, pickerMixin],
+    mixins: [visibilityMixin, 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)
       },

src/components/dialog/dialog.vue

@@ -31,7 +31,8 @@
 
 <script type="text/ecmascript-6">
   import CubePopup from '../popup/popup.vue'
-  import apiMixin from '../../common/mixins/api'
+  import visibilityMixin from '../../common/mixins/visibility'
+  import popupMixin from '../../common/mixins/popup'
 
   const COMPONENT_NAME = 'cube-dialog'
   const EVENT_CONFIRM = 'confirm'
@@ -62,7 +63,7 @@
 
   export default {
     name: COMPONENT_NAME,
-    mixins: [apiMixin],
+    mixins: [visibilityMixin, popupMixin],
     props: {
       type: {
         type: String,
@@ -99,9 +100,6 @@
             ...defCancelBtn
           }
         }
-      },
-      zIndex: {
-        type: Number
       }
     },
     data() {

src/components/drawer/drawer-panel.vue

@@ -13,7 +13,7 @@
 </template>
 
 <script type="text/ecmascript-6">
-  import apiMixin from '../../common/mixins/api'
+  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: [apiMixin],
+    mixins: [visibilityMixin],
     props: {
       data: {
         type: Array,

src/components/drawer/drawer.vue

@@ -20,7 +20,8 @@
 <script type="text/ecmascript-6">
   import { prefixStyle } from '../../common/helpers/dom'
   import CubeDrawerPanel from './drawer-panel.vue'
-  import apiMixin from '../../common/mixins/api'
+  import visibilityMixin from '../../common/mixins/visibility'
+  import popupMixin from '../../common/mixins/popup'
 
   const COMPONENT_NAME = 'cube-drawer'
   const EVENT_CHANGE = 'change'
@@ -31,7 +32,7 @@
 
   export default {
     name: COMPONENT_NAME,
-    mixins: [apiMixin],
+    mixins: [visibilityMixin, popupMixin],
     props: {
       title: {
         type: String,
@@ -79,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

src/components/picker/picker.vue

 <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"
@@ -36,7 +38,8 @@
 <script type="text/ecmascript-6">
   import BScroll from 'better-scroll'
   import CubePopup from '../popup/popup.vue'
-  import apiMixin from '../../common/mixins/api'
+  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'
 
@@ -49,7 +52,7 @@
 
   export default {
     name: COMPONENT_NAME,
-    mixins: [apiMixin, basicPickerMixin, pickerMixin],
+    mixins: [visibilityMixin, popupMixin, basicPickerMixin, pickerMixin],
     data() {
       return {
         pickerData: this.data.slice(),

src/components/popup/popup.vue

@@ -14,13 +14,14 @@
 </template>
 
 <script type="text/ecmascript-6">
-  import apiMixin from '../../common/mixins/api'
+  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: [apiMixin],
+    mixins: [visibilityMixin, popupMixin],
     props: {
       type: {
         type: String,
@@ -37,10 +38,6 @@
       center: {
         type: Boolean,
         default: true
-      },
-      zIndex: {
-        type: Number,
-        default: 100
       }
     },
     computed: {

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,103 +22,102 @@
 </template>
 
 <script>
-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'
+  import visibilityMixin from '../../common/mixins/visibility'
+  import popupMixin from '../../common/mixins/popup'
+  import pickerMixin from '../../common/mixins/picker'
 
-export default {
-  name: COMPONENT_NAME,
-  props: {
-    data: {
-      type: Array,
-      default() {
-        return []
+  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: '上一步'
       }
     },
-    title: {
-      type: String,
-      default: 'Segment Picker'
-    },
-    confirmTxt: {
-      type: String,
-      default: '确定'
-    },
-    cancelTxt: {
-      type: String,
-      default: '取消'
-    },
-    nextTxt: {
-      type: String,
-      default: '下一步'
+    data() {
+      return {
+        current: 0,
+        selectedVal: [],
+        selectedIndex: [],
+        selectedText: []
+      }
     },
-    prevTxt: {
-      type: String,
-      default: '上一步'
-    }
-  },
-  data() {
-    return {
-      current: 0,
-      selectedVal: [],
-      selectedIndex: [],
-      selectedText: []
-    }
-  },
-  computed: {
-    currentPicker () {
-      // $refs is not responsive, 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
+    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
+          }
         }
       }
-    }
-  },
-  watch: {
-    data() {
-      this.current = 0
-      this.selectedVal = []
-      this.selectedIndex = []
-      this.selectedText = []
-    }
-  },
-  methods: {
-    show() {
-      this.data.length && this.currentPicker.show()
-    },
-    hide() {
-      this.data.length && this.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>

src/components/time-picker/time-picker.vue

 <template>
   <cube-picker
     ref="picker"
-    :title="title"
+    v-model="isVisible"
     :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>
@@ -19,7 +22,9 @@
     HOUR_TIMESTAMP,
     MINUTE_TIMESTAMP
   } from '../../common/lang/date'
-  import apiMixin from '../../common/mixins/api'
+  import visibilityMixin from '../../common/mixins/visibility'
+  import popupMixin from '../../common/mixins/popup'
+  import pickerMixin from '../../common/mixins/picker'
   import CubePicker from '../picker/picker.vue'
 
   const DAY_STEP = 1
@@ -43,7 +48,7 @@
 
   export default {
     name: COMPONENT_NAME,
-    mixins: [apiMixin],
+    mixins: [visibilityMixin, popupMixin, pickerMixin],
     props: {
       title: {
         type: String,
@@ -76,9 +81,6 @@
       minuteStep: {
         type: Number,
         default: MINUTE_STEP
-      },
-      zIndex: {
-        type: Number
       }
     },
     data() {
@@ -105,7 +107,11 @@
     },
     methods: {
       show() {
-        this.$refs.picker.show()
+        if (this.isVisible) {
+          return
+        }
+        this.isVisible = true
+
         this._updateMinTime()
         this._initDays()
         this.today = this.days[0].value
@@ -116,9 +122,6 @@
           this._resetTime()
         })
       },
-      hide() {
-        this.$refs.picker.hide()
-      },
       setTime(timeStamp) {
         this.selectedTimeStamp = parseInt(timeStamp)
       },

src/components/tip/tip.vue

@@ -10,7 +10,7 @@
   </transition>
 </template>
 <script type="text/ecmascript-6">
-  import apiMixin from '../../common/mixins/api'
+  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: [apiMixin],
+    mixins: [visibilityMixin],
     props: {
       direction: {
         type: String,

src/components/toast/toast.vue

@@ -10,7 +10,8 @@
 <script type="text/ecmascript-6">
   import CubeLoading from '../loading/loading.vue'
   import CubePopup from '../popup/popup.vue'
-  import apiMixin from '../../common/mixins/api'
+  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: [apiMixin],
+    mixins: [visibilityMixin, popupMixin],
     props: {
       type: {
         type: String,
@@ -36,6 +37,7 @@
         type: Number,
         default: 3000
       },
+      // By default, Toast has the bigest z-index among popoup-based components.
       zIndex: {
         type: Number,
         default: 900

test/unit/specs/picker.spec.js

@@ -105,6 +105,36 @@ 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.callCount(2)
+
+      done()
+    }, 50)
+  })
+
   it('should trigger events', function () {
     this.timeout(10000)
 

test/unit/specs/poup.spec.js → 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.callCount(2)
+
+        done()
+      }, 50)
+    })
+
     it('events', () => {
       const clickHandler = sinon.spy()
       vm = instantiateComponent(Vue, Popup, {

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)
   })