Vue でポップアップ レイヤーとモーダル ボックスを実装するにはどうすればよいですか?

<template>
  <div class="modal-container" v-show="show">
    <div class="modal-content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Modal',
  props: {
    show: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<style scoped>
.modal-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content {
  background-color: #fff;
  padding: 20px;
}
</style>

<template>
  <div class="app">
    <button @click="showModal = !showModal">显示弹出层</button>
    <modal v-bind:show="showModal">
      <p>这是弹出层中的内容</p>
    </modal>
  </div>
</template>

<script>
import Modal from './components/Modal.vue'

export default {
  name: 'App',
  components: {
    Modal
  },
  data() {
    return {
      showModal: false
    }
  }
}
</script>

<style>
.app {
  padding: 20px;
}
</style>

<template>
  <div class="modal-container" v-show="show">
    <div class="modal-content">
      <div class="modal-body">
        <slot name="body"></slot>
      </div>
      <div class="modal-footer">
        <slot name="footer">
          <button @click="cancel">取消</button>
          <button @click="confirm">确认</button>
        </slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Confirmation',
  props: {
    show: {
      type: Boolean,
      default: false
    },
    onCancel: Function,
    onConfirm: Function
  },
  methods: {
    cancel() {
      this.onCancel && this.onCancel()
    },
    confirm() {
      this.onConfirm && this.onConfirm()
    }
  }
}
</script>

<style scoped>
.modal-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content {
  background-color: #fff;
  padding: 20px;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.modal-footer button {
  margin-left: 10px;
}
</style>

<template>
  <div class="app">
    <button @click="showModal = !showModal">显示模态框</button>
    <confirmation
      v-bind:show="showModal"
      v-bind:onCancel="cancel"
      v-bind:onConfirm="confirm"
    >
      <template v-slot:body>
        <p>确定要删除吗？</p>
      </template>
    </confirmation>
  </div>
</template>

<script>
import Confirmation from './components/Confirmation.vue'

export default {
  name: 'App',
  components: {
    Confirmation
  },
  data() {
    return {
      showModal: false
    }
  },
  methods: {
    cancel() {
      this.showModal = false
    },
    confirm() {
      alert('删除成功！')
      this.showModal = false
    }
  }
}
</script>

<style>
.app {
  padding: 20px;
}
</style>