模态框 Modal

基本

<za-cell>
  <za-button slot="description" size="xs" @click="visible1 = true">开启</za-button>
  span普通
</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-modal :visible.sync="visible1" @close="handleClose" title="标题" :showClose="true">
  模态框内容
</za-modal>
<za-modal :visible.sync="visible2" @close="handleClose" radius :showClose="true">
  <div slot="title" style="textAlign:left">标题</div>
  模态框内容
</za-modal>
<za-modal :visible.sync="visible3" @close="handleClose" @maskClick="visible3 = false" title="标题" :showClose="true">
  遮罩层可关闭
</za-modal>
<za-modal :visible.sync="visible4" @close="handleClose" @maskClick="visible4 = false">
  无头部
</za-modal>
<za-modal :visible.sync="visible5" @close="handleClose" animationType="rotate" @maskClick="visible5 = false" title="标题" :showClose="true">
<div style="height:100px">
  当前使用的是rotate旋转效果。<br><br>
  支持多种动画效果：<br>
  zoom：缩放效果（默认）<br>
  rotate：旋转效果<br>
  fade：淡出淡入效果<br>
  door：开关门效果<br>
  flip：翻转效果<br>
  moveUp、moveDown、moveLeft、moveRight：移出移入效果<br>
  slideUp、slideDown、slideLeft、slideRight：滑出滑入效果<br>
</div>
</za-modal>

特定场景

<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-alert :visible.sync="visible6" radius title="警告" message="这里是警告信息" @close="handleClose"></za-alert>
<za-confirm :visible="visible7" title="确认信息" message="你确定要这样做吗？" :ok="handleOk" :cancel="handleCancel"></za-confirm>

警告框 使用全局方法 $zaAlert

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

<div @click="handleClick"></div>
<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"
></za-alert>

确认框 使用全局方法 $zaConfirm

<div @click="handleClick"></div>
<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

或者使用模板

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

Vue Script

<script name="vue">
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')
    },
    showAlert() {
      this.$zaAlert('警告12', {
        callback: (event) => {
          console.log(event)
        }
      })
    },
    handleCancel(){
      this.visible7 = false
    }
  },
};
</script>

API

Modal Attributes

Modal Events

Alert Events

Confirm Events