当前位置: 首页 > news >正文

Element UI中el-dialog作为子组件如何由父组件控制显示/隐藏~

1、这里介绍的是将el-dialog作为组件封装便于复用,如何通过父组件控制子组件dialog的显示与隐藏。

2、思路:首先el-dialog是通过dialogVisible的值是否为true或false来控制显示与隐藏的。那么我们可以通过父传子props来将true(即showFlag的值)传递给dialog子组件,然后在子组件中监听showFlag值的变化,一旦出现变化就将showFlag的值赋值给dialogVisible,以此来实现dialog组件的显示。

如何控制隐藏呢?或者说如何实现二次点击显示?

思路:首先我们通过子传父$emit传递一个自定义事件hiddenFlag给父组件,然后在父组件中触发该方法,将showFlag的值变为false即可。

3、还有一种方法就是通过给子组件添加v-if来控制,根据个人爱好来选择吧。

4、封装dialog子组件。

<template><el-dialogtitle="添加商品":visible.sync="dialogVisible"width="40%":before-close="handleClose"style="text-align: center; line-height: 20px"><el-form:model="ruleForm":rules="rules"ref="ruleForm"label-width="100px"class="demo-ruleForm"><el-form-item label="活动名称" prop="newName"><el-input v-model="ruleForm.newName"></el-input></el-form-item><el-form-item label="活动日期" required><el-form-item prop="newData"><el-date-pickertype="date"placeholder="选择活动日期"v-model="ruleForm.newData"style="width: 100%"></el-date-picker></el-form-item></el-form-item><el-form-item label="活动地址" prop="newAddress"><el-input v-model="ruleForm.newAddress"></el-input></el-form-item><el-form-item label="爱好" prop="newLikes"><el-input v-model="ruleForm.newLikes"></el-input></el-form-item></el-form><span slot="footer" class="dialog-footer"><el-button @click="Cancel()">取 消</el-button><el-button type="primary" @click="determine()">确 定</el-button></span></el-dialog>
</template>
<script>
export default {name: "diaLog",data() {return {dialogVisible: false,ruleForm: {newName: "",newAddress: "",newData: "",newLikes: "",},rules: {newName: [{ required: true, message: "请输入活动名称", trigger: "blur" },],newAddress: [{ required: true, message: "请选择活动区域", trigger: "blur" },],newData: [{type: "date",required: true,message: "请选择日期",trigger: "change",},],newLikes: [{ required: true, message: "请输入爱好", trigger: "blur" }],},};},props: ["showFlag"],watch: {// 监听父组件传递过来的showFlag的变化,控制dialog的显示showFlag() {this.dialogVisible = this.showFlag;},},methods: {// 关闭弹窗handleClose(done) {done();this.$emit("hiddenFlag");},//   取消Cancel() {this.$emit("hiddenFlag");},//   确定determine() {this.$emit("hiddenFlag");},},
};
</script><style></style>

5、使用子组件。

<template><div><el-button type="primary" @click="addGoods()">添加商品</el-button><!-- 对话框 --><diaLog :showFlag="showFlag" @hiddenFlag="hidden()"></diaLog></div>
</template><script>
import diaLog from "../components/dialog.vue";
export default {name: "newUser",data() {return {showFlag: false,};},components: {diaLog,},methods: {// 添加商品addGoods() {// 展示弹窗this.showFlag = true;},// 接收dialog组件传递过来的隐藏弹窗信息hidden() {this.showFlag = false;}},
};
</script><style></style>

效果图:

相关文章:

Element UI中el-dialog作为子组件如何由父组件控制显示/隐藏~

1、这里介绍的是将el-dialog作为组件封装便于复用&#xff0c;如何通过父组件控制子组件dialog的显示与隐藏。 2、思路:首先el-dialog是通过dialogVisible的值是否为true或false来控制显示与隐藏的。那么我们可以通过父传子props来将true&#xff08;即showFlag的值&#xff0…...

【vue讲解:es6导入导出语法、 vue-router简单使用、登录跳转案例、scoped的使用、elementui使用】

1 es6导入导出语法 # 做项目&#xff1a;肯定要写模块--》导入使用# 默认导出和导入 在某个js中 # 命名导出和导入1.1 默认导出和导入 // #########导出语法########### // export default name // 只导出变量 // export default add // 只导出函数// export default {nam…...

#beego的orm一直引入失败#

在导入beego的orm的时候&#xff0c;一直导入失败&#xff0c;orm显示红色,表示导入失败 解决办法: 1:升级go,由1.7升级到1.8 2&#xff1a;执行以下命令 go clean go get github.com/astaxie/beego/orm go mod tidy go mod vendor 3:测试在vendor中可以看到…...

Vue插值:双大括号标签、v-text、v-html、v-bind 指令

创建应用程序实例后&#xff0c;需要通过插值进行数据绑定。数据绑定是 Vue.js 最核心的一个特性。建立数据绑定后&#xff0c;数据和视图会相互关联&#xff0c;当数据发生变化时&#xff0c;视图会自动进行更新。这样就无须手动获取 DOM 的值&#xff0c;使代码更加简洁&…...

实验五之用Processing绘画

1.案例代码如下&#xff1a; import generativedesign.*; import processing.pdf.*; import java.util.Calendar; Tablet tablet; boolean recordPDF false; float x 0, y 0; float stepSize 5.0; PFont font; String letters "Sie hren nicht die folgenden Gesnge…...

Apache CloudStack Official Document 翻译节选(七)

关于 Apache CloudStack 的 最佳实践 &#xff08;一&#xff09; Best Practices 部署Apache CloudStack是极具挑战性的&#xff0c;在整个部署过程中需要你做出形形色色的技术性选择。Apache CloudStack的配置条目是相当灵活的&#xff0c;这是因为在组合和配置具体条目时有…...

动态创建 Delphi 按钮的完整指南:基于配置文件的 `TGridPanel` 实现

在 Delphi 开发中&#xff0c;我们经常需要根据不同的配置动态生成 UI 元素。本文将带你通过一个完整的示例&#xff0c;演示如何根据配置文件动态创建按钮&#xff0c;并将它们排列在一个 TGridPanel 中。每个按钮的标题、链接、颜色和大小都将从配置文件中读取。 “C:\myApp\…...

【设计模式】工厂模式和抽象工厂模式

工厂模式 function User(role, pages) {this.role role;this.pages pages; }// new User(admin, [home, user, setting]); // new User(user, [home, user]); // new User(guest, [home]);function UserFactory(role) {switch (role) {case admin:return new User(role, [ho…...

【xilinx】Versal Adaptive SoC DDRMC - NoC QoS 选项卡未出现

在 2024.1 之前的 Vivado 版本中&#xff0c;用户在使用 NoC 验证块设计时可以访问 NoC 对象窗口和 QoS 选项卡。 Vivado 2024.1 中存在一个已知问题&#xff0c;即 NoC 对象窗口和 QoS 选项卡不出现。 要显示 NoC 对象窗口和 QoS 选项卡&#xff0c;请保存块设计&#xff0c;…...

融合创新:EasyCVR视频汇聚平台云计算技术与AI技术共筑雪亮工程智能防线

随着信息技术的飞速发展&#xff0c;视频云计算技术作为云计算领域的一个重要分支&#xff0c;正逐步在公共安全、社会治理等领域展现出其独特的优势。特别是在雪亮工程这一群众性治安防控工程中&#xff0c;视频云计算技术更是发挥了不可替代的作用。本文将从视频云计算技术的…...

keepalived的技术原理及其在负载均衡场景中的应用

keepalived的技术原理及其在负载均衡场景中的应用 深入探讨Keepalived及其在负载均衡场景中的应用1. **Keepalived概述**2. **Keepalived的技术原理**2.1 **VRRP协议**2.2 **健康检查机制**2.3 **脚本管理** 3. **Keepalived与LVS的结合应用**3.1 **LVS优缺点** 4. **Nginx与HA…...

树的重心 by江河湖海

引入 重心是什么? 想象你有一个由线悬挂的秋千,秋千的两端坐着两个人,如果这两个人坐在秋千的重心上,秋千就会保持平衡。在树的结构中,重心就是那个让所有节点到它那里的“距离”(可以理解为线的长度)总和最小的点。 重心为什么最多只有两个? 假设树的重心有两个,…...

MySQL存储过程深入指南

MySQL存储过程深入指南 存储过程是MySQL中一个强大的功能,能够显著提升数据库操作的效率和灵活性。本文将全面介绍存储过程的概念、语法、使用方法及最佳实践,帮助读者熟练掌握存储过程的使用。 1. 什么是存储过程? 存储过程(Stored Procedure)是预先编译并存储在数据库…...

牛客算法小题

目录 牛客.求和​编辑 牛客.abb 牛客.合并k个有序链表 牛客.滑雪&#xff08;暴力->递归->记忆化搜索&#xff09; 牛客.旋转字符串 牛客.求和 我没想到是dfs&#xff0c;另外我的dfs能力确实也不强&#xff0c;另外难度大的是他的那个输出 import java.util.Scanne…...

小米SU7销量超特斯拉,新车明年上半年发布

小米 SU7&#xff0c;一款国内新能源车品牌纯血新势力旗下首款轿车&#xff0c;上市短短 4 个月卖出超 4 万台&#xff0c;月均销量过万。 该说不说&#xff0c;这放在整个新能源汽车工业史上也足以称得上是一件小刀喇拍屁股&#xff0c;让人开了眼的事儿。 就在本月初&#x…...

基于Java语言的光伏监控系统+光伏发电预测+光伏项目+光伏运维+光伏储能项目

基于Java语言的光伏监控系统光伏发电预测光伏项目光伏运维光伏储能项目 介绍 基于Java语言的光伏监控系统光伏发电系统光伏软件系统光伏监控系统源码光伏发电系统源码 基于Java语言的光伏监控系统光伏发电预测光伏项目光伏运维光伏储能项目 安装教程...

unity json 处理

1. c#对象 -> json public class Item {public int id;public int num;public Item(int id, int num){this.id id;this.num num;} } public class PlayerInfo {public string name;public int atk;public int def;public float moveSpeed;public double roundSpeed;publi…...

如何使用DataGear零编码快速制作MQTT物联网实时数据看板

DataGear是一个开源免费的数据可视化分析平台&#xff0c;企业版在开源版基础上开发&#xff0c;新增了诸多企业级特性&#xff0c;包括&#xff1a;MySQL及更多部署数据库支持、MQTT/WebSocket/Redis/MongoDB数据集、OAuth2.0/CAS/JWT/LDAP统一登录支持、前后端敏感信息加密传…...

Mysql查询日志

Mysql查询日志 Mysql查询日志默认是关闭状态的。 mysql> show variables like %general_log%; --------------------------------------- | Variable_name | Value | --------------------------------------- | general_log | OFF …...

Airtest 的使用

Airtest 介绍 Airtest Project 是网易游戏推出的一款自动化测试框架&#xff0c;其项目由以下几个部分构成 Airtest : 一个跨平台的&#xff0c;基于图像识别的 UI 自动化测试框架&#xff0c;适用于游戏和 App &#xff0c; 支持 Windows, Android 和 iOS 平台&#xff0c…...

docker详细操作--未完待续

docker介绍 docker官网: Docker&#xff1a;加速容器应用程序开发 harbor官网&#xff1a;Harbor - Harbor 中文 使用docker加速器: Docker镜像极速下载服务 - 毫秒镜像 是什么 Docker 是一种开源的容器化平台&#xff0c;用于将应用程序及其依赖项&#xff08;如库、运行时环…...

Prompt Tuning、P-Tuning、Prefix Tuning的区别

一、Prompt Tuning、P-Tuning、Prefix Tuning的区别 1. Prompt Tuning(提示调优) 核心思想:固定预训练模型参数,仅学习额外的连续提示向量(通常是嵌入层的一部分)。实现方式:在输入文本前添加可训练的连续向量(软提示),模型只更新这些提示参数。优势:参数量少(仅提…...

Qt Http Server模块功能及架构

Qt Http Server 是 Qt 6.0 中引入的一个新模块&#xff0c;它提供了一个轻量级的 HTTP 服务器实现&#xff0c;主要用于构建基于 HTTP 的应用程序和服务。 功能介绍&#xff1a; 主要功能 HTTP服务器功能&#xff1a; 支持 HTTP/1.1 协议 简单的请求/响应处理模型 支持 GET…...

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别 直接训练提示词嵌入向量的核心区别 您提到的代码: prompt_embedding = initial_embedding.clone().requires_grad_(True) optimizer = torch.optim.Adam([prompt_embedding...

如何理解 IP 数据报中的 TTL?

目录 前言理解 前言 面试灵魂一问&#xff1a;说说对 IP 数据报中 TTL 的理解&#xff1f;我们都知道&#xff0c;IP 数据报由首部和数据两部分组成&#xff0c;首部又分为两部分&#xff1a;固定部分和可变部分&#xff0c;共占 20 字节&#xff0c;而即将讨论的 TTL 就位于首…...

是否存在路径(FIFOBB算法)

题目描述 一个具有 n 个顶点e条边的无向图&#xff0c;该图顶点的编号依次为0到n-1且不存在顶点与自身相连的边。请使用FIFOBB算法编写程序&#xff0c;确定是否存在从顶点 source到顶点 destination的路径。 输入 第一行两个整数&#xff0c;分别表示n 和 e 的值&#xff08;1…...

uniapp 字符包含的相关方法

在uniapp中&#xff0c;如果你想检查一个字符串是否包含另一个子字符串&#xff0c;你可以使用JavaScript中的includes()方法或者indexOf()方法。这两种方法都可以达到目的&#xff0c;但它们在处理方式和返回值上有所不同。 使用includes()方法 includes()方法用于判断一个字…...

Qt 事件处理中 return 的深入解析

Qt 事件处理中 return 的深入解析 在 Qt 事件处理中&#xff0c;return 语句的使用是另一个关键概念&#xff0c;它与 event->accept()/event->ignore() 密切相关但作用不同。让我们详细分析一下它们之间的关系和工作原理。 核心区别&#xff1a;不同层级的事件处理 方…...

DiscuzX3.5发帖json api

参考文章&#xff1a;PHP实现独立Discuz站外发帖(直连操作数据库)_discuz 发帖api-CSDN博客 简单改造了一下&#xff0c;适配我自己的需求 有一个站点存在多个采集站&#xff0c;我想通过主站拿标题&#xff0c;采集站拿内容 使用到的sql如下 CREATE TABLE pre_forum_post_…...

Visual Studio Code 扩展

Visual Studio Code 扩展 change-case 大小写转换EmmyLua for VSCode 调试插件Bookmarks 书签 change-case 大小写转换 https://marketplace.visualstudio.com/items?itemNamewmaurer.change-case 选中单词后&#xff0c;命令 changeCase.commands 可预览转换效果 EmmyLua…...