<template>
  <div>
    <hive-button @click="onClick('confirm')">confirm Modal</hive-button>
    <hive-button @click="onClick('success')">success Modal</hive-button>
    <hive-button @click="onClick('error')">error Modal</hive-button>
    <hive-button @click="onClick('warning')">warning Modal</hive-button>
    <hive-button @click="onClick('info')">info Modal</hive-button>
  </div>
</template>

<script>
  export default {
    data() {
      return {};
    },
    methods: {
      onClick(e) {
        this.$modalBox({
          type: e,
          cancelHidden: false,
          title: '这里是 Modal 标题',
          content: () => <div>这里是 Modal 内容，这里是 Modal 内容，这里是 Modal 内容，这里是 Modal 内容，这里是 Modal 内容，这里是 Modal 内容</div>,
          onConfirm() {
            console.log('点击了确认');
          },
          opened() {
            console.log('显示modal动画结束');
          },
          close() {
            console.log('关闭modal');
          },
          closed() {
            console.log('关闭modal动画结束');
          },
        });
      },
    },
  };
</script>
