模态框 Modal

基本用法

<template lang="html">
<div>
     <div class="demo-hidden">
  <za-panel>
    <za-panel-header title="基本"></za-panel-header>
    <za-panel-body>
      <za-cell>
        <za-button slot='description' size='xs' @click='visible1 = true'>开启</za-button>
        普通
      </za-cell>
      <za-cell>
        <za-button slot='description' size='xs' @click='visible2 = true'>开启</za-button>
        圆角
      </za-cell>
      <za-cell>
        <za-button slot='description' size='xs' @click='visible3 = true'>开启</za-button>
        遮罩层可关闭
      </za-cell>
      <za-cell>
        <za-button slot='description' size='xs' @click='visible4 = true'>开启</za-button>
        无头部
      </za-cell>
      <za-cell>
        <za-button slot='description' size='xs' @click='visible5 = true'>开启</za-button>
        动画效果
      </za-cell>
    </za-panel-body>
  </za-panel>
  <za-panel>
    <za-panel-header title="特定场景"></za-panel-header>
    <za-panel-body>
      <za-cell>
        <za-button slot='description' size='xs' @click='visible6 = true' theme="warning">开启</za-button>
        警告框 Alert
      </za-cell>
      <za-cell>
        <za-button slot='description' size='xs' @click='visible7 = true' theme="warning">开启</za-button>
        确认框 Confirm
      </za-cell>
    </za-panel-body>
  </za-panel>
    <za-modal :visible.sync='visible1' @close='handleClose' title="标题" :show-close='true'>
      模态框内容
    </za-modal>
    <za-modal :visible.sync='visible2' @close='handleClose' radius :show-close='true'>
      <div slot='title' style='textAlign:left'>标题</div>
      模态框内容
    </za-modal>
    <za-modal :visible.sync='visible3' @close='handleClose' :close-on-click-modal='true' title="标题" :show-close='true' >
      遮罩层可关闭
    </za-modal>
    <za-modal :visible.sync='visible4' @close='handleClose' :close-on-click-modal='true'>
      无头部
    </za-modal>
    <za-modal :visible.sync='visible5' @close='handleClose' animationType="rotate" :close-on-click-modal='true' title="标题" :show-close='true'>
      当前使用的是rotate旋转效果。<br /><br />
      支持多种动画效果：<br />
      zoom：缩放效果（默认）<br />
      rotate：旋转效果<br />
      fade：淡出淡入效果<br />
      door：开关门效果<br />
      flip：翻转效果<br />
      moveUp、moveDown、moveLeft、moveRight：移出移入效果<br />
      slideUp、slideDown、slideLeft、slideRight：滑出滑入效果<br />
    </za-modal>
    <za-alert :visible.sync='visible6' radius title="警告" message="这里是警告信息" @close='handleClose'></za-alert>
    <za-confirm :visible='visible7' title="确认信息" message="你确定要这样做吗？" :ok='handleOk' :cancel='handleCancel'></za-confirm>
    </div>
</div>
</template>
<script>
export default {
  data() {
    return {
      visible1: false,
      visible2: false,
      visible3: false,
      visible4: false,
      visible5: false,
      visible6: false,
      visible7: false,
    };
  },
  methods: {
    handleClose(reason, event){
      console.log(reason, event);
    },
    handleOk(){
      alert('ok')
    },
    handleCancel(){
      this.visible7 = false
    }
  },
};
</script>

特定场景

警告框 使用全局方法 $zaAlert

<template>
<div @click='handleClick'></div>
</template>
<script>
export default{
  methods:{
    handleClick(){
      this.$zaAlert('警告', {
        callback: (event) => {
          console.log(event)
        }
      })
    }
  }
}
</script>

或

<template>
<div @click='handleClick'></div>
</template>
<script>
export default{
  methods:{
    handleClick(){
      const h = this.$createElement;
      // 这里的message可以是VNode
      const message = h('p', null, [
        h('span', null, '内容可以是 '),
        h('i', { style: 'color: teal' }, 'VNode')
      ]);
      this.$zaAlert(message, {
        callback: (event) => {
          console.log(event)
        }
      })
    }
  }
}

或者使用 za-alert Component

<za-alert :visible.sync='visible' radius title="警告" message="这里是警告信息" @close='handleClose' />

确认框 使用全局方法 $zaConfirm

<template>
  <div @click='handleClick'></div>
</template>
<script>
export default{
  methods:{
      handleClick() {
        const h = this.$createElement;
        // message 可以是VNode 或者 String
        const message = h('p', null, [
          h('span', null, '内容可以是 '),
          h('i', { style: 'color: teal' }, 'VNode'),
        ]);
        // $zaConfirm 参数为 <?message: String, options: Object>
        this.$zaConfirm({
          message,
          ok: (e) => {
            this.$zaToast('ok');
            return true; // 此处返回true, 会关闭confirm
          },
          cancel: (e) => {
            this.$zaToast('closed');
          },
        });
      }
    }
}
</script>

注意：这里的 ok 和 cancel 需要使用Arrow Function, 这样内部的this才会指向当前的vue实例, 另外，ok 函数只有在返回 true 的时候会关闭 Confirm, 而 cancel 会自动关闭 Confirm

或者使用模板

<template>
  <za-confirm :visible='visible' title="确认信息" message="你确定吗？" :ok='handleOk' :cancel='handleCancel' />
<template>

API

Modal Attributes

Modal Events

Alert Events

Confirm Events