Popup 弹出层

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

引入

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

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

代码演示

API

属性说明类型默认值备注
v-model弹出层是否可见Booleanfalse
has-mask是否有蒙层Booleantrue
mask-closable点击蒙层是否可关闭弹出层Booleantrue
position弹出层位置Stringcentercenter, top, bottom, left, right
transition弹出层过渡动画Stringfadefade, fade-bounce, fade-slide, fade-zoom
slide-up, slide-down, slide-left, slide-right

PopupTitleBar Props

属性说明类型默认值备注
title标题String
describe描述String
ok-text确认按钮文案String为空则没有确认按钮
cancel-text取消按钮文案String为空则没有取消按钮
only-close只有右侧关闭按钮Booleanfalse
title-align标题和描述位置Stringcenter注意leftright时会分别隐藏左右两侧按钮

@beforeShow()

弹出层即将展示事件

@show()

弹出层展示事件

@beforeHide()

弹出层即将隐藏事件

@hide()

弹出层隐藏事件

PopupTitleBar Events

@confirm()

确认选择事件

@cancel()

取消选择事件