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

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

* [optimize]: abstract visibilityMixin and popupMixin

Author: AmyFoxFN

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 |