写一个自定义弹出层，基于vue封装，弹出层里面有输入框

以下是一个基于Vue封装的自定义弹出层，其中包含一个输入框：

<template>
  <div v-if="show" class="overlay">
    <div class="modal">
      <div class="modal-header">
        <h3>{{ title }}</h3>
        <button @click="closeModal">X</button>
      </div>
      <div class="modal-body">
        <label for="input">请输入：</label>
        <input type="text" id="input" v-model="inputValue">
        <button @click="submitInput">提交</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      title: '',
      inputValue: ''
    }
  },
  methods: {
    openModal(title) {
      this.title = title
      this.show = true
    },
    closeModal() {
      this.show = false
    },
    submitInput() {
      // 处理输入框的提交逻辑
      console.log(this.inputValue)
      this.closeModal()
    }
  }
}
</script>

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

.modal {
  background-color: white;
  padding: 20px;
  border-radius: 5px;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.modal-body {
  display: flex;
  align-items: center;
}
</style>

在父组件中使用该弹出层：

<template>
  <div>
    <button @click="openCustomModal">打开自定义弹出层</button>
    <custom-modal ref="customModal"></custom-modal>
  </div>
</template>

<script>
import CustomModal from './CustomModal.vue'

export default {
  components: {
    CustomModal
  },
  methods: {
    openCustomModal() {
      this.$refs.customModal.openModal('自定义弹出层')
    }
  }
}
</script>