<template>
  <div>
    <hive-button @click="onClick">显示Modal</hive-button>
    <hive-modal
      v-model="showModal"
      @confirm="onOkClick"
      @open="onOpen"
      @opened="onOpened"
      @close="onClose"
      @closed="onClosed"
      title="这里是 Modal 标题"
      width="400"
      destroy>
      <div>
        <p>这里是 Modal 内容，这里是 Modal 内容，这里是 Modal 内容，这里是 Modal 内容，这里是 Modal 内容，这里是 Modal 内容</p>
      </div>
      <div slot="footer">
        <hive-button @click="close" type="primary">取消</hive-button>
        <hive-button @click="close" type="primary">确定</hive-button>
      </div>
    </hive-modal>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        showModal: false,
      };
    },

    methods: {
      onClick() {
        this.showModal = true;
      },
      close() {
        this.showModal = false;
      },
      onOkClick() {
        console.log('点击了确认');
      },
      onOpen() {
        console.log('显示modal');
      },
      onOpened() {
        console.log('显示modal动画结束');
      },
      onClose() {
        console.log('关闭modal');
      },
      onClosed() {
        console.log('关闭modal动画结束');
      },
    },
  };
</script>
