Popup 弹出层

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

引入

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

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

代码演示

API

属性	说明	类型	默认值	备注
v-model	弹出层是否可见	Boolean	`false`
has-mask	是否有蒙层	Boolean	`true`
mask-closable	点击蒙层是否可关闭弹出层	Boolean	`true`
position	弹出层位置	String	`center`	`center`, `top`, `bottom`, `left`, `right`
transition	弹出层过渡动画	String	`fade`	`fade`, `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	只有右侧关闭按钮	Boolean	`false`
title-align	标题和描述位置	String	`center`	注意`left`和`right`时会分别隐藏左右两侧按钮

@beforeShow()

弹出层即将展示事件

@show()

弹出层展示事件

@beforeHide()

弹出层即将隐藏事件

@hide()

弹出层隐藏事件

PopupTitleBar Events

@confirm()

确认选择事件

@cancel()

取消选择事件

选择器

列表选择器

# Popup 弹出层

# 引入

# 代码演示

# API

# Popup Props

# PopupTitleBar Props

# Popup Events

# @beforeShow()

# @show()

# @beforeHide()

# @hide()

# PopupTitleBar Events

# @confirm()

# @cancel()

引入

代码演示

API

Popup Props

PopupTitleBar Props

Popup Events

@beforeShow()

@show()

@beforeHide()

@hide()

PopupTitleBar Events

@confirm()

@cancel()