elementUI的弹框复用

最新推荐文章于 2025-03-24 19:46:34 发布
最新推荐文章于 2025-03-24 19:46:34 发布
阅读量1.2k 收藏 2
点赞数
文章标签： vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/jiao0916/article/details/105973812
版权
本文介绍了如何在Vue.js项目中复用ElementUI的弹框组件，通过设置不同状态来实现添加和编辑功能。内容包括根据addType判断显示不同标题，点击调用时清空表单数据的方法，以及在弹框保存按钮的处理逻辑，分别处理录入和编辑的不同操作。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1、要有一个区别方法的状态:

内容相同，为了节省代码，就可以使用同一个弹框，常见的情况有添加和编辑

如果addType是等于"add" 那么就让标题显示录入订单，如果不是就显示编辑订单

2.点击调用的时候,（记得清空内容）

tips:2.1:this.$nextTick(() =>{this.$refs.addOrderForm.clearValidate()})  这个是清空弹框中的form

     2.2:$refs 获取form的所有元素

3.点击弹框的保存按钮

如果是录入状态 相关逻辑写在if的对象里，编辑的逻辑写在else里

最低0.47元/天 解锁文章
Element-UI实现el-dialog弹框拖拽功能
觉醒法师的专栏
06-17 8671
在实际开发中，会发现很多系统中弹框是可以在浏览器可见区域自由拖拽的，这极大方便用户的操作。在查看Element-UI中弹框（el-dialog）组件的文档说明后，发现并未实现这一功能，不过也无须担心，vue中提供了Vue.directive钩子函数，可以从底层操作DOM来实现并升级弹框的拖拽功能。
基于ElementUI封装了CRUD的弹框组件
小陈的博客
08-31 617
回头看自己以前的代码，感觉就像屎一样。我会想，为什么不封装一下，如果用的是ElementUI框架，也可以在此基础上进行二次封装。譬如说，这个用来对列表数据进行增删改查的弹框。
Vue手写一个弹出框复用组件
weixin_45389051的博客
06-28 992
虽然现在UI框架很多有弹出框这个组件，但是自己写是不是更能体现自己的能力呢，样式也可以随意改变，哈哈，个人觉得是这样 首先创建一个message文件,里面创建一个messageBox.vue <template> <div class="messageBox"> <h2>{{ title }}</h2> <p>{{ content }}</p> <div>
解决 Element UI 嵌套弹窗的状态管理问题！！！
最新发布
小丁的博客
03-24 1046
使用@Watch监听 prop 变化，而不是直接修改通过$emit向父组件通知状态变化使用$nextTick确保状态更新和 DOM 渲染的正确时序合理使用对象解构避免引用类型带来的问题添加确保组件完全重置通过这次问题的解决，我们不仅修复了具体的 bug，还总结出了一套处理 Vue 组件状态管理的最佳实践。这些经验对于开发复杂的前端应用都很有帮助。希望这篇文章能帮助遇到类似问题的开发者！如果你有任何问题或建议，欢迎在评论区讨论。💬#Vue #ElementUI #前端开发 #技术博客。
element 弹窗
H___mmm的博客
06-09 247
element 弹窗不能用v-model 得用:visible.sync
element——弹窗
weixin_41897680的博客
12-14 8221
本来以为弹窗挺简单的，结果自己想多了。这几天的使用碰到了好多问题。 在组件中使用弹窗 <div id="app"> <el-button type="primary" @click="open=true">打开弹窗</el-button> <test :visible.sync="open" :table="tableData"></test> </div> <script type="text/javascript">
Element UI当添加和编辑共一个弹窗时
weixin_55753884的博客
03-16 956
【代码】Element UI当添加和编辑共一个弹窗时。
技术分享 | 弹窗开发中，如何使用 Hook 封装 el-dialog？
LigaAI的博客
05-06 1249
本文将分享如何使用 useDialog Hook 封装 el-dialog，实现更灵活、更易用的弹窗组件。
vue项目中仿element-ui弹框效果的实例代码
10-17
该实例代码展示了一个组件从创建到使用的整个过程，说明了如何将Element-UI中的弹框样式和功能复用到Vue项目中。同时，通过代码的封装和方法的定义，实现了一个可复用、可配置的弹框组件，这为其他类似场景提供了很...
elementUI前端CRUD页面
04-09
Element UI 是一个基于 Vue.js 的开源 UI 组件库，它为开发者提供了丰富的组件，用于构建美观、可复用的用户界面。"CRUD" 页面在Web开发中通常指的是创建（Create）、读取（Read）、更新（Update）和删除（Delete）...
vue+elementui 实现新增和修改共用一个弹框
热门推荐
weixin_45369963的博客
08-21 1万+
一、新增 1、新增按钮 2、新增事件 在methods中，用来打开弹窗， dialogVisible在data中定义使用有true或false来控制显示弹框 **3、新增确定，弹框确定事件 ，新增和修改共用一个确定事件，使用id区别 **3、新增事件 调新增接口，判断是否有id，没有就调新增接口 二、修改 2-1、修改按钮 ，表格行编辑按钮使用scope.row拿到当前行的数据 2-2、修改事件， 把当前行数据赋值给表单，就把当前行数据回显出来了 2-3、修改事件 修改接口，判断是否有id，
弹框的用法（element-ui）
weixin_52063946的博客
07-29 907
// 根据用户id删除用户 async removeUser(id) { const confirmResult = await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning', }).catch((err) => { return e..
ElementUi之dialog弹窗
Lydia
08-25 4911
ElementUi之dialog弹窗。
Elementui，通过Dialog，实现全局动态confirm自定义弹窗，不需要各页面单独引入组件（可显示页面、html、代码高亮显示、普通文字）
qq_40591925的博客
06-23 1万+
Elementui，通过el-dialog，实现confirm 弹窗
vue（父子组件）使用element弹窗功能
qq_44891434的博客
07-12 2351
vue（父子组件）使用element弹窗功能 注意点 注意使用父子组件传值的时候，props的值是单项的。 所以说在做弹窗的时候我们需要先，父组件向子组件传值，然后子组件向父组件传值。 父组件 <template> <div> <div class="displayVideo"> <template> <ul v-infinite-scroll="load" class="personalDiaplayLin
对话框复用
zhanghy_80的专栏
05-19 759
对话框复用
简单封装一个element弹窗
m0_56896206的博客
03-21 1538
简单封装一个element弹窗 适合在脚本和js里调用或者在vue页面函数内调用 import Vue from 'vue' export default function(component, options = { dialog: {}}, cb) { return new Promise(async(resolve, reject) => { const dialog = { appendToBody: true, // 对话框遮罩层是否插入至 body 元素上
element——vue封装弹窗及注意事项
Juliet_xmj的博客
09-08 1988
element——vue封装弹窗及注意事项 可在每页写单独样式或在封装文件中写统一样式 1. 弹窗脚部取消按钮可隐藏， 2. 按钮可实现loading效果， 3. 弹窗标题、脚部按钮内容、弹窗宽度都可以自定义 第一种方法 弊端： 弹窗插件点击确定会默认调取弹窗右上角关闭事件，所以有时候关闭方法中的内容会替换确定方法中的内容，导致确定方法中调取接口时数据错误 1.1 封装 <template> <div class="all-dialog2"> <el-dia
【Vue】基于 element-ui 封装弹窗
qq_45677671的博客
04-04 1573
基于 element-ui 封装弹窗—简洁版
el dialog多个弹框复用
09-19
el-dialog组件是一种常用的弹框组件，可以在前端页面中快速创建弹窗，实现与用户的交互。在使用el-dialog组件时，可以通过多个弹框的复用来提高代码的复用性和可维护性。 在使用el-dialog组件时，可以通过使用v-if或v-show指令来控制弹框的显示与隐藏。通过对弹框的数据进行不同的赋值，可以实现对不同的弹框进行复用。 首先，在vue的data选项中定义需要控制的弹框所对应的数据变量，例如dialog1Visible、dialog2Visible等。然后，通过给el-dialog组件的visible属性绑定相应的数据变量，动态控制弹框的显示与隐藏。通过修改这些数据变量的值，可以控制不同的弹框的显示与隐藏。 在使用多个弹框的时候，可以共用同一个弹框组件，通过传入不同的参数来改变弹框的内容和行为。可以通过在父组件中定义数据，在子组件中通过props接收传递的参数。 另外，可以通过自定义事件来监听弹框的关闭动作，实现不同的弹框之间的交互。当某个弹框关闭时，可以在其关闭的回调函数中修改其他弹框的状态，实现复杂的业务逻辑交互。 总之，通过el-dialog组件的多个弹框复用，我们可以减少重复的代码编写，提高代码的可维护性和复用性。在使用过程中，我们需要通过控制不同弹框的数据变量，传递不同的参数，监听弹框的动作等方式来实现复用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值