mand-mobile/components/popup
moyuboy ae1e1c277b feat(button): remove `.native` modifier on click event 2018-04-24 22:47:39 +08:00
..
demo feat(button): remove `.native` modifier on click event 2018-04-24 22:47:39 +08:00
test Initial commit 2018-03-26 16:04:04 +08:00
README.md doc(readme): adjust the example path for each component in its readme doc. 2018-03-29 14:56:07 +08:00
component.js Initial commit 2018-03-26 16:04:04 +08:00
index.vue test: Improve unit test cases 2018-04-23 17:33:32 +08:00
title-bar.vue test: Improve unit test cases 2018-04-23 17:33:32 +08:00

README.md

title preview
Popup 弹出层 https://didi.github.io/mand-mobile/examples/#/popup

由其他控件触发,屏幕滑出或弹出一块自定义内容区域

引入

import { Popup, PopupTitleBar } from 'mand-mobile'

Vue.component(Popup.name, Popup)
Vue.component(PopupTitleBar.name, PopupTitleBar)

代码演示

API

Popup Props

属性 说明 类型 默认值 备注
v-model 弹出层是否可见 Boolean false -
has-mask 是否有蒙层 Boolean true -
mask-closable 点击蒙层是否可关闭弹出层 Boolean true -
position 弹出层位置 String center center, top, bottom, left, right
transition 弹出层过度动画 String fade, slide-up/down/left/right -
prevent-scroll 是否禁止滚动穿透 Boolean false -
prevent-scroll-exclude 禁止滚动的排除元素 String/HTMLElement - -

PopupTitleBar Props

属性 说明 类型 默认值 备注
title 标题 String - -
ok-text 确认按钮文案 String - 为空则没有确认按钮
cancel-text 取消按钮文案 String - 为空则没有取消按钮

Popup Events

@beforeShow()

弹出层即将展示事件

@show()

弹出层展示事件

@beforeHide()

弹出层即将隐藏事件

@hide()

弹出层隐藏事件

PopupTitleBar Events

@confirm()

确认选择事件

@cancel()

取消选择事件