<template>
  <div class="kole-fs-mask" v-if="visible">
    <div class="kole-fs-head">
      <span class="kole-fs-title">{{ title }}</span>
      <button class="kole-fs-close" @click="$emit('cancel')">×</button>
    </div>
    <div class="kole-fs-body">
      <slot>内容区</slot>
    </div>
    <div class="kole-fs-foot">
      <button class="kole-btn" @click="$emit('cancel')">取消</button>
      <button class="kole-btn kole-btn--primary" @click="$emit('ok')">保存</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'KoleFullScreenModal',
  props: {
    visible: { type: Boolean, default: false },
    title: { type: String, default: '全屏弹窗' }
  }
};
</script>

<style src="./FullScreenModal.css"></style>
