vue使用el-dialog打开弹窗

发布时间：2024-09-07 16:19:57

发布者：神棍子

浏览量:

这里是一个商城项目，在商品列表页面需要增加对每个商品进行编辑关键词的快捷按钮设置，具体实现为点击按钮后打开一个弹窗，在弹窗中输入信息提交到后台，下面看一下实现流程。

首先在html中增加按钮，先找到循环商品的列表增加dom

增加点击按钮

对应页面中的显示为

点击按钮网页显示状态

然后需要初始化几个变量

初始化变量

第一个为控制对话框的显示隐藏，第二个存储当前点击的商品，然后dom中添加el-dialog

dom中弹窗代码

下面增加click方法，传递click事件和所点击的商品信息

点击方法

内容是将editKeyWordLabel设置为true 打开对话框，然后增加提交方法将数据提交到后台

提交数据到后台

到此时所有的流程就完成了，看一下页面流程

上一篇：页面自适应常用的几种方式

下一篇：迅睿cms中在同一模板使用不同的css背景图片

关键词:

2024-09-07

vue使用el-dialog打开弹窗查看详情

2024-08-16

分享一个vue属性侦听的基础实例查看详情

2024-08-02

vue3中的全局事件总线查看详情

2024-07-28

vue3中监听写法的改变查看详情

2024-07-21

创建vue3的两种方式查看详情

2024-06-02

Vue3中修改计算属性内容查看详情