弹出框 Popup

弹出框 Popup

基本用法

<template lang="html">
    <main>
     <div class="demo-hidden">
        <za-panel>
          <za-panel-header title="基本"></za-panel-header>
          <za-panel-body>
            <za-cell>
              <za-button size='xs' slot='description' @click='visible1 = true'>开启</za-button>
              从上方弹出
            </za-cell>
            <za-cell>
              <za-button size='xs' slot='description' @click='visible2 = true'>开启</za-button>
              从下方弹出
            </za-cell>
            <za-cell>
              <za-button size='xs' slot='description' @click='visible3 = true'>开启</za-button>
              从左侧弹出
            </za-cell>
            <za-cell>
              <za-button size='xs' slot='description' @click='visible4 = true'>开启</za-button>
              从右侧弹出
            </za-cell>
          </za-panel-body>
        </za-panel>
      </div>
      <za-popup
        style="zIndex:2000"
        :visible.sync='visible1'
        direction="top"
        :duration='3000'
        maskType="transparent"
        autoClose
        @close='popupClose'
      >
        <div class="popup-box-top" style="width: 100%;padding: 10px;background: rgba(0,0,0,.7);color: #fff;font-size: 14px;text-align: center;">更新成功</div>
      </za-popup>
      <za-popup
        :visible.sync='visible2'
        direction="bottom"
        @close='popupClose'
      >
      <div class="popup-box" style="height: 100%;padding: 20px 20px 100px;background: #fff;">
        <za-button size="sm" @click='visible2 = false'>关闭弹层</za-button>
      </div>
      </za-popup>
      <za-popup
        :visible.sync='visible3'
        direction="left"
        @close='popupClose'
      >
      <div class="popup-box-left" style="width:160px;height: 100%;padding: 20px 20px 100px;background: #fff;">
        <za-button size="sm" @click='visible3 = false'>关闭弹层</za-button>
      </div>
      </za-popup>
      <za-popup
        :visible.sync='visible4'
        direction="right"
        @close='popupClose'
      >
      <div class="popup-box" style="width:160px;height: 100%;padding: 20px 20px 100px;background: #fff;">
        <za-button size="sm" @click='visible4 = false'>关闭弹层</za-button>
      </div>
      </za-popup>
    </main>
</template>
<script>
export default {
  data() {
    return {
      visible1: false,
      visible2: false,
      visible3: false,
      visible4: false,
    }
  },
  methods: {
    popupClose(reason, event) {
      console.log(reason, event);
    },
  },
};
</script>

API

Popup Attributes

Popup Events