Popup 弹出层
由其他控件触发,屏幕滑出或弹出一块自定义内容区域
引入
import { Popup, PopupTitleBar } from 'mand-mobile'
Vue.component(Popup.name, Popup)
Vue.component(PopupTitleBar.name, PopupTitleBar)
代码演示
不同位置弹出
<template>
<div class="md-example-child md-example-child-popup md-example-child-popup-0">
<md-button @click="showPopUp('center')">屏幕中弹出</md-button>
<md-popup v-model="isPopupShow.center">
<div class="md-example-popup md-example-popup-center">
Popup Center
</div>
</md-popup>
<md-button @click="showPopUp('bottom')">底部弹出</md-button>
<md-popup
v-model="isPopupShow.bottom"
position="bottom"
>
<md-popup-title-bar
title="Popup Title"
ok-text="ok"
cancel-text="cancel"
@confirm="hidePopUp('bottom')"
@cancel="hidePopUp('bottom')"
></md-popup-title-bar>
<div class="md-example-popup md-example-popup-bottom">
Popup Bottom
</div>
</md-popup>
<md-button @click="showPopUp('top')">顶部弹出</md-button>
<md-popup
v-model="isPopupShow.top"
:hasMask="false"
position="top"
>
<div class="md-example-popup md-example-popup-top">
Popup Top
<md-icon
name="cross"
@click.native="hidePopUp('top')"
></md-icon>
</div>
</md-popup>
<md-button @click="showPopUp('left')">左侧弹出</md-button>
<md-popup
v-model="isPopupShow.left"
position="left"
>
<div class="md-example-popup md-example-popup-left">
Popup Left
</div>
</md-popup>
<md-button @click="showPopUp('right')">右侧弹出</md-button>
<md-popup
v-model="isPopupShow.right"
position="right"
>
<div class="md-example-popup md-example-popup-right">
Popup Right
</div>
</md-popup>
</div>
</template>
<script>
import {Popup, PopupTitleBar, Button, Icon} from 'mand-mobile'
export default {
name: 'popup-demo',
components: {
[Popup.name]: Popup,
[PopupTitleBar.name]: PopupTitleBar,
[Button.name]: Button,
[Icon.name]: Icon,
},
data() {
return {
isPopupShow: {},
}
},
methods: {
showPopUp(type) {
this.$set(this.isPopupShow, type, true)
},
hidePopUp(type) {
this.$set(this.isPopupShow, type, false)
},
},
}
</script>
<style lang="stylus">
.md-example-child-popup-0
float left
width 100%
.md-button
margin-bottom 20px
.md-example-popup
position relative
font-size font-minor-large
background color-bg-base
box-sizing border-box
text-align center
.md-example-popup-center
padding 50px
border-radius radius-normal
.md-example-popup-top
width 100%
height 75px
line-height 75px
background notice-bar-fill
color notice-bar-color
.md-icon
position absolute
right 20px
top 50%
transform translateY(-50%)
.md-example-popup-bottom
width 100%
padding: 50px 0
p
line-height 50px
.md-example-popup-left, .md-example-popup-right
height 100%
padding 0 150px
display flex
align-items center
.md-popup-box
background-color #FFF
</style>
其他配置
防止滚动击穿请在移动设备中扫码预览
<template>
<div class="md-example-child md-example-child-popup md-example-child-popup-1" style="height: 1000px;">
<md-button @click="showPopUp('top')">无遮罩层</md-button>
<md-popup
v-model="isPopupShow.top"
:hasMask="false"
position="top"
>
<div class="md-example-popup md-example-popup-top">
Popup Top
<md-icon
name="cross"
@click.native="hidePopUp('top')"
></md-icon>
</div>
</md-popup>
<md-button @click="showPopUp('scroll')">防止滚动穿透</md-button>
<md-popup
v-model="isPopupShow.scroll"
position="bottom"
prevent-scroll
prevent-scroll-exclude=".md-example-popup-bottom"
>
<md-popup-title-bar
title="Popup Prevent Scroll"
ok-text="ok"
cancel-text="cancel"
@confirm="hidePopUp('scroll')"
@cancel="hidePopUp('scroll')"
></md-popup-title-bar>
<div class="md-example-popup md-example-popup-bottom" style="height: 200px;overflow:auto">
<p v-for="n in 50" :key="n">Popup Bottom {{ n }}</p>
</div>
</md-popup>
<md-button @click="showPopUp('mask')">禁用遮罩层点击</md-button>
<md-popup
v-model="isPopupShow.mask"
position="bottom"
:mask-closable="false"
>
<md-popup-title-bar
title="Popup Prevent Mask Click"
ok-text="ok"
cancel-text="cancel"
@confirm="hidePopUp('mask')"
@cancel="hidePopUp('mask')"
></md-popup-title-bar>
<div class="md-example-popup md-example-popup-bottom">
Popup Bottom
</div>
</md-popup>
</div>
</template>
<script>
import {Popup, PopupTitleBar, Button, Icon} from 'mand-mobile'
export default {
name: 'popup-demo',
components: {
[Popup.name]: Popup,
[PopupTitleBar.name]: PopupTitleBar,
[Button.name]: Button,
[Icon.name]: Icon,
},
data() {
return {
isPopupShow: {},
}
},
methods: {
showPopUp(type) {
this.$set(this.isPopupShow, type, true)
},
hidePopUp(type) {
this.$set(this.isPopupShow, type, false)
},
},
}
</script>
<style lang="stylus">
.md-example-child-popup-1
float left
width 100%
.md-button
margin-bottom 20px
.md-example-popup
position relative
font-size font-minor-large
background color-bg-base
box-sizing border-box
text-align center
.md-example-popup-center
padding 50px
border-radius radius-normal
.md-example-popup-top
width 100%
height 75px
line-height 75px
background notice-bar-fill
color notice-bar-color
.md-icon
position absolute
right 20px
top 50%
transform translateY(-50%)
.md-example-popup-bottom
width 100%
padding: 50px 0
p
line-height 50px
.md-example-popup-left, .md-example-popup-right
height 100%
padding 0 150px
display flex
align-items center
.md-popup-box
background-color #FFF
</style>
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 | 此方案在内容顶部和底部仍有滚动穿透的问题,推荐使用ScrollView 作为滚动区域 |
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()
取消选择事件