Popup 弹出层

Scan me!

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

引入

  1. import { Popup, PopupTitleBar } from 'mand-mobile'
  3. Vue.component(Popup.name, Popup)
  4. Vue.component(PopupTitleBar.name, PopupTitleBar)

代码演示

不同位置弹出

  1. <template>
  2.   <div class="md-example-child md-example-child-popup md-example-child-popup-0">
  3.     <md-button @click="showPopUp('center')">屏幕中弹出</md-button>
  4.     <md-popup v-model="isPopupShow.center">
  5.       <div class="md-example-popup md-example-popup-center">
  6.         Popup Center
  7.       </div>
  8.     </md-popup>
  10.     <md-button @click="showPopUp('bottom')">底部弹出</md-button>
  11.     <md-popup
  12.       v-model="isPopupShow.bottom"
  13.       position="bottom"
  14.     >
  15.       <md-popup-title-bar
  16.         title="Popup Title"
  17.         ok-text="ok"
  18.         cancel-text="cancel"
  19.         @confirm="hidePopUp('bottom')"
  20.         @cancel="hidePopUp('bottom')"
  21.       ></md-popup-title-bar>
  22.       <div class="md-example-popup md-example-popup-bottom">
  23.         Popup Bottom
  24.       </div>
  25.     </md-popup>
  27.     <md-button @click="showPopUp('top')">顶部弹出</md-button>
  28.     <md-popup
  29.       v-model="isPopupShow.top"
  30.       :hasMask="false"
  31.       position="top"
  32.     >
  33.       <div class="md-example-popup md-example-popup-top">
  34.         Popup Top
  35.         <md-icon
  36.           name="cross"
  37.           @click.native="hidePopUp('top')"
  38.         ></md-icon>
  39.       </div>
  40.     </md-popup>
  42.     <md-button @click="showPopUp('left')">左侧弹出</md-button>
  43.     <md-popup
  44.       v-model="isPopupShow.left"
  45.       position="left"
  46.     >
  47.       <div class="md-example-popup md-example-popup-left">
  48.         Popup Left
  49.       </div>
  50.     </md-popup>
  52.     <md-button @click="showPopUp('right')">右侧弹出</md-button>
  53.     <md-popup
  54.       v-model="isPopupShow.right"
  55.       position="right"
  56.     >
  57.       <div class="md-example-popup md-example-popup-right">
  58.         Popup Right
  59.       </div>
  60.     </md-popup>
  61.   </div>
  62. </template>
  64. <script>
  65. import {Popup, PopupTitleBar, Button, Icon} from 'mand-mobile'
  67. export default {
  68.   name: 'popup-demo',
  69.   components: {
  70.     [Popup.name]: Popup,
  71.     [PopupTitleBar.name]: PopupTitleBar,
  72.     [Button.name]: Button,
  73.     [Icon.name]: Icon,
  74.   },
  75.   data() {
  76.     return {
  77.       isPopupShow: {},
  78.     }
  79.   },
  80.   methods: {
  81.     showPopUp(type) {
  82.       this.$set(this.isPopupShow, type, true)
  83.     },
  84.     hidePopUp(type) {
  85.       this.$set(this.isPopupShow, type, false)
  86.     },
  87.   },
  88. }
  90. </script>
  92. <style lang="stylus">
  93. .md-example-child-popup-0
  94.   float left
  95.   width 100%
  96.   .md-button
  97.     margin-bottom 20px
  98.   .md-example-popup
  99.     position relative
  100.     font-size font-minor-large
  101.     background color-bg-base
  102.     box-sizing border-box
  103.     text-align center
  104.   .md-example-popup-center
  105.     padding 50px
  106.     border-radius radius-normal
  107.   .md-example-popup-top
  108.     width 100%
  109.     height 75px
  110.     line-height 75px
  111.     background notice-bar-fill
  112.     color notice-bar-color
  113.     .md-icon
  114.       position absolute
  115.       right 20px
  116.       top 50%
  117.       transform translateY(-50%)
  118.   .md-example-popup-bottom
  119.     width 100%
  120.     padding: 50px 0
  121.     p
  122.       line-height 50px
  123.   .md-example-popup-left, .md-example-popup-right
  124.     height 100%
  125.     padding 0 150px
  126.     display flex
  127.     align-items center
  128.   .md-popup-box
  129.     background-color #FFF
  130. </style>
  131.  
  132.

其他配置

防止滚动击穿请在移动设备中扫码预览
  1. <template>
  2.   <div class="md-example-child md-example-child-popup md-example-child-popup-1" style="height: 1000px;">
  3.     <md-button @click="showPopUp('top')">无遮罩层</md-button>
  4.     <md-popup
  5.       v-model="isPopupShow.top"
  6.       :hasMask="false"
  7.       position="top"
  8.     >
  9.       <div class="md-example-popup md-example-popup-top">
  10.         Popup Top
  11.         <md-icon
  12.           name="cross"
  13.           @click.native="hidePopUp('top')"
  14.         ></md-icon>
  15.       </div>
  16.     </md-popup>
  18.     <md-button @click="showPopUp('scroll')">防止滚动穿透</md-button>
  19.     <md-popup
  20.       v-model="isPopupShow.scroll"
  21.       position="bottom"
  22.       prevent-scroll
  23.       prevent-scroll-exclude=".md-example-popup-bottom"
  24.     >
  25.       <md-popup-title-bar
  26.         title="Popup Prevent Scroll"
  27.         ok-text="ok"
  28.         cancel-text="cancel"
  29.         @confirm="hidePopUp('scroll')"
  30.         @cancel="hidePopUp('scroll')"
  31.       ></md-popup-title-bar>
  32.       <div class="md-example-popup md-example-popup-bottom" style="height: 200px;overflow:auto">
  33.         <p v-for="n in 50" :key="n">Popup Bottom {{ n }}</p>
  34.       </div>
  35.     </md-popup>
  37.     <md-button @click="showPopUp('mask')">禁用遮罩层点击</md-button>
  38.     <md-popup
  39.       v-model="isPopupShow.mask"
  40.       position="bottom"
  41.       :mask-closable="false"
  42.     >
  43.       <md-popup-title-bar
  44.         title="Popup Prevent Mask Click"
  45.         ok-text="ok"
  46.         cancel-text="cancel"
  47.         @confirm="hidePopUp('mask')"
  48.         @cancel="hidePopUp('mask')"
  49.       ></md-popup-title-bar>
  50.       <div class="md-example-popup md-example-popup-bottom">
  51.         Popup Bottom
  52.       </div>
  53.     </md-popup>
  54.   </div>
  55. </template>
  57. <script>
  58. import {Popup, PopupTitleBar, Button, Icon} from 'mand-mobile'
  60. export default {
  61.   name: 'popup-demo',
  62.   components: {
  63.     [Popup.name]: Popup,
  64.     [PopupTitleBar.name]: PopupTitleBar,
  65.     [Button.name]: Button,
  66.     [Icon.name]: Icon,
  67.   },
  68.   data() {
  69.     return {
  70.       isPopupShow: {},
  71.     }
  72.   },
  73.   methods: {
  74.     showPopUp(type) {
  75.       this.$set(this.isPopupShow, type, true)
  76.     },
  77.     hidePopUp(type) {
  78.       this.$set(this.isPopupShow, type, false)
  79.     },
  80.   },
  81. }
  83. </script>
  85. <style lang="stylus">
  86. .md-example-child-popup-1
  87.   float left
  88.   width 100%
  89.   .md-button
  90.     margin-bottom 20px
  91.   .md-example-popup
  92.     position relative
  93.     font-size font-minor-large
  94.     background color-bg-base
  95.     box-sizing border-box
  96.     text-align center
  97.   .md-example-popup-center
  98.     padding 50px
  99.     border-radius radius-normal
  100.   .md-example-popup-top
  101.     width 100%
  102.     height 75px
  103.     line-height 75px
  104.     background notice-bar-fill
  105.     color notice-bar-color
  106.     .md-icon
  107.       position absolute
  108.       right 20px
  109.       top 50%
  110.       transform translateY(-50%)
  111.   .md-example-popup-bottom
  112.     width 100%
  113.     padding: 50px 0
  114.     p
  115.       line-height 50px
  116.   .md-example-popup-left, .md-example-popup-right
  117.     height 100%
  118.     padding 0 150px
  119.     display flex
  120.     align-items center
  121.   .md-popup-box
  122.     background-color #FFF
  123. </style>
  124.  
  125.

API

Popup Props

属性说明类型默认值备注
v-model弹出层是否可见Booleanfalse-
has-mask是否有蒙层Booleantrue-
mask-closable点击蒙层是否可关闭弹出层Booleantrue-
position弹出层位置Stringcentercenter, top, bottom, left, right
transition弹出层过度动画Stringfade, slide-up/down/left/right-
prevent-scroll是否禁止滚动穿透Booleanfalse此方案在内容顶部和底部仍有滚动穿透的问题，推荐使用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()

取消选择事件