• 引入
  • 代码演示
    • 不同位置
    • 其他配置
  • API
    • Popup Props
    • PopupTitleBar Props
    • Popup Events
    • @beforeShow()
    • @show()
    • @beforeHide()
    • @hide()
    • PopupTitleBar Events
      • @confirm()
      • @cancel()

    Popup 弹出层

    Scan me!

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

    引入

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

    代码演示

    不同位置

    Popup 弹出层 - 图2

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

    其他配置

    Popup 弹出层 - 图3

            <template>
  <div class="md-example-child md-example-child-popup md-example-child-popup-2">
    <md-button @click="showPopUp('align')">标题居左</md-button>
    <md-popup
      class="inner-popup"
      v-model="isPopupShow.align"
      position="bottom"
    >
      <md-popup-title-bar
        only-close
        large-radius
        title="标题"
        describe="title & description align left"
        title-align="left"
        @cancel="hidePopUp('align')"
      ></md-popup-title-bar>
      <div class="md-example-popup md-example-popup-align">
        <md-scroll-view :scrolling-x="false">
          <p>Scroll View</p>
        </md-scroll-view>
      </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="close"
          @click.native="hidePopUp('top')"
        ></md-icon>
      </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
        only-close
        large-radius
        @confirm="hidePopUp('mask')"
        @cancel="hidePopUp('mask')"
      ></md-popup-title-bar>
      <div class="md-example-popup md-example-popup-bottom">
        <p>Recording</p>
        <!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
        <svg width="55" height="80" viewBox="0 0 55 80" xmlns="http://www.w3.org/2000/svg" fill="#2f86f6">
          <g transform="matrix(1 0 0 -1 0 80)">
            <rect width="10" height="20" rx="3">
              <animate attributeName="height" begin="0s" dur="4.3s" values="20;45;57;80;64;32;66;45;64;23;66;13;64;56;34;34;2;23;76;79;20" calcMode="linear" repeatCount="indefinite" />
            </rect>
            <rect x="15" width="10" height="80" rx="3">
              <animate attributeName="height" begin="0s" dur="2s" values="80;55;33;5;75;23;73;33;12;14;60;80" calcMode="linear" repeatCount="indefinite" />
            </rect>
            <rect x="30" width="10" height="50" rx="3">
              <animate attributeName="height" begin="0s" dur="1.4s" values="50;34;78;23;56;23;34;76;80;54;21;50" calcMode="linear" repeatCount="indefinite" />
            </rect>
            <rect x="45" width="10" height="30" rx="3">
              <animate attributeName="height" begin="0s" dur="2s" values="30;45;13;80;56;72;45;76;34;23;67;30" calcMode="linear" repeatCount="indefinite" />
            </rect>
          </g>
        </svg>
      </div>
    </md-popup>
  </div>
</template>

<script>
import {Popup, PopupTitleBar, ScrollView, Button, Icon} from 'mand-mobile'

export default {
  name: 'popup-demo',
  components: {
    [Popup.name]: Popup,
    [PopupTitleBar.name]: PopupTitleBar,
    [Button.name]: Button,
    [Icon.name]: Icon,
    [ScrollView.name]: ScrollView,
  },
  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-2
  float left
  width 100%
  .md-button
    margin-bottom 20px
  .md-popup-title-bar
    .md-popup-cancel
      .md-icon
        align-self flex-start
        margin-left 32px
  .md-example-popup
    position relative
    font-size font-minor-large
    background color-bg-base
    box-sizing border-box
    text-align center
    background-color #FFF
  .md-example-popup-align
    padding 0 40px
    .md-scroll-view
      height 500px
      background #EEE
      p
        line-height 500px
        font-size 64px
        font-weight 200
        color #999
  .md-example-popup-top
    width 100%
    height 75px
    line-height 75px
    background #4a4c5b
    color #fff
    .md-icon
      position absolute
      right 20px
      top 50%
      transform translateY(-50%)
  .md-example-popup-bottom
    width 100%
    padding 0 0 150px
    p
      margin-bottom 100px
      font-size 64px
      font-weight 200
      color #999
  .md-example-popup-left, .md-example-popup-right
    height 100%
    padding 0 150px
    display flex
    align-items center
</style>

    API

    Popup Props

    属性说明类型默认值备注
    v-model弹出层是否可见Booleanfalse-
    has-mask是否有蒙层Booleantrue-
    mask-closable点击蒙层是否可关闭弹出层Booleantrue-
    position弹出层位置Stringcentercenter, top, bottom, left, right
    transition弹出层过度动画String-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-为空则没有取消按钮
    large-radius 2.4.0+大圆角模式Booleanfalse-
    only-close 2.4.0+只有右侧关闭按钮Booleanfalse-
    title-align 2.4.0+标题和描述位置Stringcenter注意left和right时会分别隐藏左右两侧按钮

    Popup Events

    @beforeShow()

    弹出层即将展示事件

    @show()

    弹出层展示事件

    @beforeHide()

    弹出层即将隐藏事件

    @hide()

    弹出层隐藏事件

    PopupTitleBar Events

    @confirm()

    确认选择事件

    @cancel()

    取消选择事件