Popup 弹出层

Scan me!

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

引入

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

其他配置

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

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()

取消选择事件