首页elementplus 二次确认弹窗

elementplus 二次确认弹窗

时间: 2025-01-27 11:11:50 浏览: 52

Element Plus 是基于 Vue.js 的 UI 组件库，它提供了一个简洁易用的界面设计和丰富的组件集。关于二次确认弹窗（Confirmation Dialog），在 Element Plus 中，通常用于需要用户确认操作是否真的执行，例如删除数据、确认提交重要信息等场景。Element Plus 提供了 `el-dialog` 元素，配合 `confirm` 函数或者自定义事件处理，可以轻松创建这种确认对话框。用户点击“确定”按钮会执行相应的操作，而点击“取消”则会关闭弹窗并停止默认行为。以下是基本的使用示例： ```html <template> <button @click="showConfirm">点击确认</button> <el-dialog v-model="dialogVisible" title="提示"> <p>你确定要执行这个操作吗?</p> <span slot="footer"> <el-button type="primary" @click="handleOk">确定</el-button> <el-button @click="handleCancel">取消</el-button> </span> </el-dialog> </template> <script> export default { data() { return { dialogVisible: false, }; }, methods: { showConfirm() { this.dialogVisible = true; }, handleOk() { // 执行操作 console.log('确认操作'); this.dialogVisible = false; // 关闭弹窗 }, handleCancel() { this.dialogVisible = false; // 关闭弹窗 }, }, }; </script> ```

阅读全文