| 1 | ---
|
| 2 | title: Popup 弹出层
|
| 3 | preview: https://didi.github.io/mand-mobile/examples/#/popup
|
| 4 | ---
|
| 5 |
|
| 6 | 由其他控件触发，屏幕滑出或弹出一块自定义内容区域
|
| 7 |
|
| 8 | ### 引入
|
| 9 |
|
| 10 | ```javascript
|
| 11 | import { Popup, PopupTitleBar } from 'mand-mobile'
|
| 12 |
|
| 13 | Vue.component(Popup.name, Popup)
|
| 14 | Vue.component(PopupTitleBar.name, PopupTitleBar)
|
| 15 | ```
|
| 16 |
|
| 17 | ### 代码演示
|
| 18 |
|
| 19 |
|
| 20 | ### API
|
| 21 |
|
| 22 | #### Popup Props
|
| 23 | |属性 | 说明 | 类型 | 默认值| 备注|
|
| 24 | |----|-----|------|------|------|
|
| 25 | |v-model|弹出层是否可见|Boolean|`false`|-|
|
| 26 | |has-mask|是否有蒙层|Boolean|`true`|-|
|
| 27 | |mask-closable|点击蒙层是否可关闭弹出层|Boolean|`true`|-|
|
| 28 | |position|弹出层位置|String|`center`|`center`, `top`, `bottom`, `left`, `right`|
|
| 29 | |transition|弹出层过渡动画|String|-|`fade`, `fade-bounce`, `fade-slide`, `fade-zoom`<br> `slide-up`, `slide-down`, `slide-left`, `slide-right`|
|
| 30 |
|
| 31 | #### PopupTitleBar Props
|
| 32 | |属性 | 说明 | 类型 | 默认值 | 备注|
|
| 33 | |----|-----|------|------|------|
|
| 34 | |title|标题|String|-|-|
|
| 35 | |describe|描述|String|-|-|
|
| 36 | |ok-text|确认按钮文案|String|-|为空则没有确认按钮|
|
| 37 | |cancel-text|取消按钮文案|String|-|为空则没有取消按钮|
|
| 38 | |large-radius <sup class="version-after">2.4.0+</sup>|大圆角模式|Boolean|`false`|-|
|
| 39 | |only-close <sup class="version-after">2.4.0+</sup>|只有右侧关闭按钮|Boolean|`false`|`jsx` 或 `tsx` 里使用 [propsOnlyClose](https://github.com/vuejs/babel-plugin-transform-vue-jsx#difference-from-react-jsx)|
|
| 40 | |title-align <sup class="version-after">2.4.0+</sup>|标题和描述位置|String|`center`|注意`left`和`right`时会分别隐藏左右两侧按钮|
|
| 41 |
|
| 42 | #### Popup Events
|
| 43 |
|
| 44 | #### @beforeShow()
|
| 45 | 弹出层即将展示事件
|
| 46 |
|
| 47 | #### @show()
|
| 48 | 弹出层展示事件
|
| 49 |
|
| 50 | #### @beforeHide()
|
| 51 | 弹出层即将隐藏事件
|
| 52 |
|
| 53 | #### @hide()
|
| 54 | 弹出层隐藏事件
|
| 55 |
|
| 56 | #### PopupTitleBar Events
|
| 57 |
|
| 58 | ##### @confirm()
|
| 59 | 确认选择事件
|
| 60 |
|
| 61 | ##### @cancel()
|
| 62 | 取消选择事件
|