vue3 弹框加名字 element ui

### 使用 Element Plus 替代 Element UI 由于 `Element UI` 不再支持 Vue 3.0，建议使用其更新版本 `Element Plus` 来构建应用中的组件[^2]。 ### 安装 Element Plus 为了在项目中集成 `Element Plus` 并创建带有名字输入功能的弹窗对话框，需先安装依赖： ```bash npm install element-plus --save ``` ### 引入 Element Plus 接着，在项目的入口文件（通常是 main.js 或者 main.ts）里全局注册 `ElementPlus` 及样式资源： ```javascript import { createApp } from 'vue' import App from './App.vue' import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' const app = createApp(App) app.use(ElementPlus) app.mount('#app') ``` ### 创建带名字输入的弹出窗口组件 下面是一个简单的例子，展示了如何利用 `el-dialog`, `el-input` 和其他必要的 API 构建一个可以显示并编辑姓名字段的小部件： #### HelloWorld.vue (示例组件) ```html <template> <div class="hello"> <!-- 触发按钮 --> <el-button type="primary" @click="dialogVisible=true">打开对话框</el-button> <!-- 对话框部分 --> <el-dialog :visible.sync="dialogVisible" title="请输入您的名字：" width="30%"> <span slot="footer" class="dialog-footer"> <el-form label-width="80px"> <el-form-item label="名字"> <el-input v-model="name"></el-input> </el-form-item> </el-form> <el-button @click="dialogVisible=false">取 消</el-button> <el-button type="primary" @click="handleConfirm()">确 认</el-button> </span> </el-dialog> </div> </template> <script> export default { name: "HelloWorld", data() { return { dialogVisible: false, name: '' } }, methods:{ handleConfirm(){ console.log('您输入的名字:', this.name); alert(`您好, ${this.name}`); this.dialogVisible = false; } } } </script> ``` 上述代码片段实现了点击按钮后弹出包含单个文本输入域用于接收用户名称的功能，并提供了确认提交后的简单反馈逻辑。当用户关闭对话框或取消操作时不会保存任何更改；而按下“确认”键则会在控制台上打印所填内容并向用户发送问候消息[^1]。