VUE3 怎么在同一个界面上增加一个弹窗，输入信息点击确定进行提交

在 Vue3 中，要在同一个界面上添加一个弹窗并允许用户输入信息后提交，通常会使用组件化的方式来实现，比如使用官方推荐的 `vue-router` 的 `Dialog` 组件或者是基于第三方库如 `element-plus` 或者 `iview` 等构建的自定义模态框。

以下是基本步骤：

1. **引入组件库**：
如果选择使用 `element-ui`，你可以安装它并导入 `ElMessage` 和 `ElMessageBox` 组件：

   npm install element-plus -S

或者：

   import { ElMessage, ElMessageBox } from 'element-plus';

2. **创建弹窗组件**：
创建一个用于显示弹窗内容并处理提交操作的组件，例如 `InputModal.vue`:

   <template>
     <el-dialog :visible.sync="dialogVisible" title="输入信息">
       <el-input v-model="inputValue"></el-input>
       <div slot="footer">
         <el-button @click="handleClose">取消</el-button>
         <el-button type="primary" @click="submitForm">确认</el-button>
       </div>
     </el-dialog>
   </template>

   <script>
   export default {
     data() {
       return {
         dialogVisible: false,
         inputValue: '',
       };
     },
     methods: {
       handleClose() {
         this.dialogVisible = false;
       },
       submitForm() {
         // 在这里处理提交逻辑，例如发送 API 请求等
         console.log('提交数据:', this.inputValue);
         this.dialogVisible = false; // 提交后关闭弹窗
         // 后续可根据需要调用其他接口或更新状态
       },
     },
   };
   </script>

3. **在父组件中使用弹窗**：
在父组件模板中引用这个弹窗组件，并控制其显示隐藏状态：

   <button @click="openModal">打开弹窗</button>
   <InputModal ref="modal" /> <!-- 使用ref以便在父组件中操作 -->

   <script>
   import InputModal from './InputModal.vue';

   export default {
     components: {
       InputModal,
     },
     methods: {
       openModal() {
         this.$refs.modal.dialogVisible = true;
       },
     },
   };
   </script>

4. **在需要的地方调用**：
当你想在界面的某个地方触发弹窗显示，只需调用 `openModal()` 方法即可。