弹出框 Popup

基本

<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-cell>
  <za-button size="xs" slot="description" @click="visible5 = true">开启</za-button>
  从中间弹出
</za-cell>
<za-popup style="zIndex:2000" :visible.sync="visible1" direction="top" maskType="transparent">
  <div class="popup-box-top" style="width: 100%;padding: 10px;background: rgba(0,0,0,.7);color: #fff;font-size: 14px;text-align: center;" @click="visible1 = false">
    更新成功，点击关闭弹层
  </div>
</za-popup>
<za-popup :visible.sync="visible2" direction="bottom">
  <div class="popup-box" style="height: 100%;padding: 20px 20px 100px;background: #fff;">
    <za-button size="sm" @click="visible2 = false">关闭弹层</za-button>
    <za-button size="sm" @click="showAlert">二次弹窗</za-button>
  </div>
</za-popup>
<za-popup :visible.sync="visible3" direction="left">
  <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">
  <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>
<za-popup :visible.sync="visible5" animation-type="zoom" direction="center">
  <div class="popup-box" style="width:160px;height: 160px;padding: 20px;background: #fff;display: flex;justify-content: center;align-items: center;">
    <za-button size="sm" @click="visible5 = false">关闭弹层</za-button>
  </div>
</za-popup>

设置挂载容器

<za-cell>
  <za-button size="xs" slot="description" @click="visible6 = true">开启</za-button>
  从下方弹出
</za-cell>

<za-popup :visible.sync="visible6" direction="bottom" :get-container="getContainer">
  <div class="popup-box" style="height: 100%;padding: 20px 20px 100px;background: #fff;">
    <za-button size="sm" @click="visible6 = false">设置挂载容器</za-button>
  </div>
</za-popup>

Vue Script

<script name="vue">
const div1 = document.body;
export default {
  data() {
    return {
      visible1: false,
      visible2: false,
      visible3: false,
      visible4: false,
      visible5: false,
      visible6: false,
    }
  },
  methods: {
    showAlert() {
      this.$zaAlert('二次弹窗');
    },
    getContainer: () => div1,
  },
};
</script>

API

Popup Attributes

Popup Events