<template>
  <!-- teleport的使用  to属性渲染到id为 teleport-test 的元素身上   在index.html中-->
  
   <div id="center" v-if="isOpen">
     <slot>插槽</slot>
     <button @click="buttonClick">关闭模态框</button>
   </div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  props:{

    isOpen: {
      type: Boolean,
      required: true
    },
  },
  // emits 写自定义事件  作用 比较清晰知道该组件有那些自定义事件
  emits: {
    // 无需验证写法
    'close-model': null,

    // 这种写法  自定义函数  可以在运行时验证参数是否正确
    'close-modals': (payload: any) => {
      return payload.type === 'close'
    }
  },
  setup(props,context) {
    const buttonClick = () => {
      context.emit('close-model')
    }

    // 这种写法来校验
    context.emit('close-modals',{
      // 如果验证失败会有一个警告
      type: 'close'
      // type: 'sss'
    })
    return {
      buttonClick
    }
  }
})

</script>

<style>
#center{
  width: 600px;
  height: 300px;
  border: 1px solid #999;
  background-color: #fff;
  position: fixed;
  left: 50%;
  top: 50%;
  margin-left: -300px;
  margin-top: -150px;
}
</style>