<template>
  <div>
    <h1>模态框</h1>
    <button class="btn btn-default" @click="show">显示</button>
    <Modal v-model:show="modal" title="hello">
      <div>hello</div>
    </Modal>

    
    <h1>模态框-标题+内容+结尾</h1>
    <button class="btn btn-default" @click="show1">显示</button>
    <Modal v-model:show="modal1" title="hello" :show-canel-button="false" :show-ok-button="false">
      <template #header>
        标题
      </template>
      <template #default>
        内容
      </template>
      <template #footer>
        结尾
      </template>
    </Modal>
  </div>
</template>

<script>

import Modal from '@/modal/index.js';

export default {

  components: {
    'Modal': Modal,
  },
  data: function(){
    return {
      modal: false,
      modal1: false,
    };
  },

  mounted: function(){
        
  },

  methods: {
    show: function(){
      this.modal = true;
    },
    show1: function(){
      this.modal1 = true;
    },
  },
};
</script>

<style scoped>

</style>