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

在 Vue3 中添加一个弹窗通常使用的是第三方库如 Element UI、Vuetify 或者自定义的 `v-modal` 组件。这里以 Element UI 为例，你可以按照以下步骤操作：

1. 首先，在项目中安装 Element UI：

   npm install element-ui --save

2. 引入 Element 的 `dialog` 组件并注册组件：

   import { ElDialog } from 'element-plus';
   import 'element-plus/dist/index.css';

   Vue.component('el-dialog', ElDialog);

3. 创建一个弹窗组件模板，在需要的地方触发显示弹窗：

   <template>
     <button @click="openModal">打开弹窗</button>

     <!-- 弹窗内容 -->
     <el-dialog :visible.sync="modalVisible" title="输入信息">
       <form v-model="dialogForm">
         <el-input v-model="dialogForm.content"></el-input>
       </form>
       <div slot="footer">
         <el-button type="primary" @click="confirm">确定</el-button>
         <el-button @click="cancel">取消</el-button>
       </div>
     </el-dialog>
   </template>

4. 定义数据属性和方法：

   export default {
     data() {
       return {
         modalVisible: false, // 是否显示弹窗
         dialogForm: {} // 存放用户输入的信息
       };
     },
     methods: {
       openModal() {
         this.modalVisible = true;
       },
       confirm() {
         // 在这里处理确认按钮的行为，例如保存输入内容到数据库等
         console.log('确认内容:', this.dialogForm.content);
         this.closeModal();
       },
       closeModal() {
         this.modalVisible = false;
       },
       cancel() {
         this.closeModal();
       }
     }
   };

5. 当用户点击确定时，你可以在这里添加你需要的具体业务逻辑。