VUE宝典之el-dialog使用

文章目录

    • 🍁前言
    • 🍁el-dialog简介
    • 🍁el-dialog属性
    • 🍁el-dialog示例
    • 🍁父子组件值传递示例

🍁前言

el-dialog是Element UI库中的一个重要组件,用于在Vue应用程序中创建弹出框。它提供了一组实用的属性和事件,让我们能够轻松地实现各种弹出框功能。本文将详细介绍el-dialog组件的使用方法和示例,帮助您更好地理解如何在实际项目中使用它。

🍁el-dialog简介

el-dialog是一个非常灵活的弹出框组件,它可以通过简单的配置来实现各种样式的弹出框。el-dialog组件基于Element UI库,因此在使用之前需要确保已经正确引入了Element UI库。

🍁el-dialog属性

el-dialog提供了许多属性,用于控制弹出框的外观和行为。以下是一些常用的属性:

  • 📒visible:控制弹出框是否可见。
  • 📒title:弹出框的标题。
  • 📒width:弹出框的宽度。
  • 📒fullscreen:是否全屏显示。
  • 📒append-to-body:将弹窗附加到body上。
  • 📒close-on-click-modal:点击蒙层是否关闭弹窗。
  • 📒close-on-press-escape:按下Esc键是否关闭弹窗。
  • 📒show-close:是否显示关闭按钮。
  • 📒draggable:是否可拖动。
  • 📒resizable:是否可调整大小。
    除了以上属性外,el-dialog还支持一些自定义事件,例如:@open、@close等。这些事件可以在组件实例中通过 $emit 方法来触发。

🍁el-dialog示例

下面是一个简单的el-dialog示例,展示了如何使用属性和事件来控制弹出框的行为和样式:

在模板中添加el-dialog组件:
html

<template>  <div>  <el-button @click="dialogVisible = true">打开弹出框</el-button>  <el-dialog :visible.sync="dialogVisible" title="提示" width="30%" @close="dialogVisible = false">  <p>这是一段信息</p>  <div slot="footer" class="dialog-footer">  <el-button @click="dialogVisible = false">取 消</el-button>  <el-button type="primary" @click="dialogVisible = false">确 定</el-button>  </div>  </el-dialog>  </div>  
</template>

在脚本中定义数据和方法:

export default {  data() {  return {  dialogVisible: false,  };  },  
};

在这个示例中,我们通过点击按钮来控制dialogVisible的值,从而打开或关闭弹出框。visible.sync属性用于双向绑定弹出框的可见性。title属性用于设置弹出框的标题。width属性用于设置弹出框的宽度。@close事件用于监听弹出框关闭事件,并在关闭时设置dialogVisible为false。在弹出框的内容部分,我们通过p标签来添加文本。在底部工具栏中,我们通过slot="footer"来定义底部按钮的位置,并通过el-button来添加取消和确定按钮。注意,为了能够正确显示底部工具栏,我们需要在弹出的内容后面添加一个div元素作为底部工具栏的容器,并使用slot="footer"来指定插槽名称。同时,我们还可以根据需要添加其他属性和事件来控制弹出框的行为和样式。例如,我们可以设置fullscreen属性为true来全屏显示弹出框,或者设置draggable属性为true来使弹出框可拖动。同时,我们还可以通过触发自定义事件来实现一些特定的功能,例如在弹出框打开时触发@open事件来执行一些操作。总之,el-dialog组件提供了丰富的属性和事件,让我们可以灵活地实现各种样式的弹出框功能。在实际项目中,我们可以根据具体需求进行配置和使用。

🍁父子组件值传递示例

当el-dialog组件声明在子组件中时,父组件和子组件可以通过props和事件进行相互传递参数。以下是一个代码示例:

  • 父组件(ParentComponent.vue):

html

<template>  <div>  <child-component ref="childDialog" :initial-message="parentMessage" @child-event="handleChildEvent"></child-component>  <el-button @click="openChildDialog">打开子组件的弹出框</el-button>  </div>  
</template>  <script>  
import ChildComponent from './ChildComponent.vue';  export default {  components: {  ChildComponent  },  data() {  return {  parentMessage: 'Hello from parent'  };  },  methods: {  openChildDialog() {  // 通过 $refs 访问子组件实例,并调用 openDialog 方法打开弹出框  this.$refs.childDialog.openDialog();  },  handleChildEvent(childMessage) {  // 处理子组件传递的事件和参数  console.log('Received message from child:', childMessage);  // 可以在这里执行其他逻辑或更新父组件的数据  }  }  
};  
</script>
  • 子组件(ChildComponent.vue):

html

<template>  <div>  <el-dialog :visible.sync="dialogVisible" title="子组件的弹出框">  <p>{{ message }}</p>  </el-dialog>  </div>  
</template>  <script>  
export default {  props: {  initialMessage: {  type: String,  default: ''  }  },  data() {  return {  dialogVisible: false, // 控制弹出框的显示与隐藏  message: this.initialMessage // 初始化时接收父组件传递的参数  };  },  methods: {  openDialog() {  // 打开弹出框,并触发父组件的事件传递参数  this.dialogVisible = true;  this.$emit('child-event', 'Hello from child');  },  closeDialog() {  // 关闭弹出框  this.dialogVisible = false;  }  },  watch: {  initialMessage(newValue) {  // 监听父组件传递的参数变化,并更新子组件的数据  this.message = newValue;  }  }  
};  
</script>

在父组件中,我们使用了ref属性给子组件指定了一个引用名称childDialog,并通过:initial-message="parentMessage"将父组件的数据parentMessage传递给子组件。同时,在父组件的模板中添加了一个按钮,当点击该按钮时,会触发openChildDialog方法,通过$ refs访问子组件实例,并调用子组件的openDialog方法打开弹出框。在父组件的方法handleChildEvent中,我们处理子组件传递的事件和参数,并可以在这里执行其他逻辑或更新父组件的数据。在子组件中,我们定义了一个props属性initialMessage来接收父组件传递的参数,并在初始化时将参数赋值给子组件的message数据属性。子组件的openDialog方法中,我们打开弹出框,并通过$emit触发一个自定义事件child-event,将参数’Hello from child’传递给父组件。同时,我们使用:visible.sync="dialogVisible"来绑定弹出框的显示状态。这样,当dialogVisible的值变化时,弹出框的显示状态也会相应地改变。


🏫博客主页:魔王-T

🥝大鹏一日同风起 扶摇直上九万里

❤️感谢大家点赞👍收藏⭐评论✍️

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/210680.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Dubbo3云原生微服务开发实战】「Dubbo前奏导学」 RPC服务的底层原理和实现

RPC服务 RPC服务介绍RPC通信模式RPC架构组成RPC技术要点RPC通信技术选项分析RPC实战开发6大基础组件基础组件之Guava基础组件之Hutools基础组件之ReflectionASM基础组件之FastJSON/FastJSON2基础组件之FST相比FastJSON的优势 基础组件之Commons-Codec RPC框架层面选项分析RPC组…

持续集成交付CICD:Jenkins配置Nexus制品上传流水线

目录 一、实验 1.Jenkins配置制品上传流水线 二、问题 1.上传制品显示名称有误 一、实验 1.Jenkins配置制品上传流水线 (1) 新建流水线项目 &#xff08;2&#xff09;描述 &#xff08;3&#xff09;添加参数 &#xff08;4&#xff09;查看构建首页 &#xff08;5&…

实现简易的一对一用户聊天

服务端 package 一对一用户;import java.awt.BorderLayout; import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; import java.io.PrintWriter; import java.net.ServerSocket; import java.net.Socket; import java.util.Vector…

Vue.js - 界面设计工具和UI组件库

ViewDesign ViewDesign是一款开源的在线设计工具&#xff0c;它主要提供了一种可视化的界面设计方法&#xff0c;可以帮助设计师和开发人员更高效地完成界面设计和开发工作。 ViewDesign的特点是支持在线协作&#xff0c;可以多人同时进行设计&#xff0c;提高了设计效率&…

Redis课程:黑马点评

文章目录 基于Redis实现短信登录商户查询缓存优惠券秒杀一人一单 分布式锁Redis分布式锁误删情况说明解决Redis分布式锁误删问题使用lua脚本解决分布式锁的原子性问题 基于阻塞队列实现秒杀优化Redis消息队列优化秒杀业务达人探店参考 本文是根据黑马程序员的视频课程 黑马程序…

vscode 开发c环境

前置条件&#xff1a; 1.vscode安装C/C Extension Pack扩展 2.安装gcc或者clang开发环境 在工程.vscode目录下创建task任务文件 tasks.json {"tasks": [{"type": "cppbuild","label": "build","command": &q…

Kubernetes架构及核心部件

文章目录 1、Kubernetes集群概述1.1、概述1.2、通过声明式API即可 2、Kubernetes 集群架构2.1、Master 组件2.1.1、API Server2.1.2、集群状态存储2.1.3、控制器管理器2.1.4、调度器 2.2、Worker Node 组件2.2.1、kubelet2.2.2、容器运行时环境2.2.3、kube-proxy 2.3、图解架构…

深入解析Node.js:V8引擎、事件驱动和非阻塞式I/O

文章目录 1. 引言2. 什么是Node.js&#xff1f;3. V8引擎3.1 V8引擎简介3.2 V8引擎的特点 4. 事件驱动4.1 事件循环4.2 事件触发与监听4.2.1 代码示例 4.3 异步回调4.3.1 代码示例 5. 非阻塞式I/O5.1 非阻塞式I/O的优势5.2 异步与同步的对比5.2.1 同步I/O的代码示例5.2.2 异步I…

前端知识笔记(三)———CSS核心功能手册:从熟悉到精通

参考HTML代码 <!DOCTYPE html> <html lang"zh-CN"><head><meta charset"utf-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content"widthdevice-wi…

指针 注意事项

指针变量的本质是用来放地址&#xff0c;而一般的变量是放数值的。 1、指针的定义&#xff08;两种形式&#xff09; ①int x3; int *p&x ②int x; int *p&#xff1b; x3&#xff1b;p&x int*p中 *p和p的差别&#xff1a;简单说*p是数值&#xff0c;p是地址&a…

Linux 系统上配置 SSH 密钥

1. 生成 SSH 密钥 打开终端&#xff0c;运行以下命令来生成 SSH 密钥&#xff1a; ssh-keygen -t rsa -b 4096 -C "wqzbxhexample.com" 替换 "wqzbxhexample.com" 为你在 GitHub 注册时使用的邮箱地址。 2. 添加 SSH 密钥到 SSH 代理 运行以下命令来启…

ROS gazebo 机器人仿真,环境与robot建模,添加相机 lidar,控制robot运动

b站上有一个非常好的ros教程234仿真之URDF_link标签简介-机器人系统仿真_哔哩哔哩_bilibili&#xff0c;推荐去看原视频。 视频教程的相关文档见&#xff1a;6.7.1 机器人运动控制以及里程计信息显示 Autolabor-ROS机器人入门课程《ROS理论与实践》零基础教程 本文对视频教程…

java物联网协议解析插件,java iot对接解析框架.java物联网架构的设计思路

一般来说&#xff0c;物联网开发则hi对硬件设备进行信息采集&#xff0c;所以建议技术栈如下&#xff1a; 物联网开发技术栈一般如下&#xff1a; nettyspringbootrocketmqredismagic-byte 其中netty用于tcp和数据接入 rockemqt用于消息临时储存中转&#xff0c; springboot就…

【论文精读】REACT: SYNERGIZING REASONING AND ACTING IN LANGUAGE MODELS

REACT: SYNERGIZING REASONING AND ACTING IN LANGUAGE MODELS 前言ABSTRACT1 INTRODUCTION2 REACT: SYNERGIZING REASONING ACTING3 KNOWLEDGE-INTENSIVE REASONING TASKS3.1 SETUP3.2 METHODS3.3 RESULTS AND OBSERVATIONS 4 DECISION MAKING TASKS5 RELATED WORK6 CONCLUSI…

phpstudy搭建WordPress教程

一、phpstudy新建配置WordPress 打开phpstudy&#xff0c;启动Apache&#xff08;或者Nginx&#xff09;和MySQL服务 来到数据库部分&#xff0c;点击[创建数据库]&#xff0c;填写新建数据库的名称&#xff0c;用户名以及密码&#xff0c;完成后点击确认 来到网站部分&#x…

Course2-Week4-决策树

Course2-Week4-决策树 文章目录 Course2-Week4-决策树1. 决策树的直观理解2. 构建单个决策树2.1 熵和信息增益2.2 构建决策树——二元输入特征2.3 构建决策树——多元输入特征2.4 构建决策树——连续的输入特征2.5 构建回归树——连续的输出结果(选修)2.6 代码实现-递归构建单个…

解决 php 连接mysql数据库时报错:Fatal error: Class ‘mysqli’ not found in问题

在使用php对mysql进行连接的过程中&#xff0c;出现了Fatal error: Uncaught Error: Class "mysqli" not found in的问题 解决方案 这个错误通常表示您的PHP代码中缺少MySQL扩展或者没有启用MySQL扩展。 我们首先确认一下PHP环境中已经安装了MySQL扩展。检查一下自己…

Redis如何做内存优化?

Redis如何做内存优化&#xff1f; 1、缩短键值的长度 缩短值的长度才是关键&#xff0c;如果值是一个大的业务对象&#xff0c;可以将对象序列化成二进制数组&#xff1b; 首先应该在业务上进行精简&#xff0c;去掉不必要的属性&#xff0c;避免存储一些没用的数据&#xff1…

rust详解

前言 rust 学习曲线非常陡峭&#xff0c;但是基本语法也还算挺好理解&#xff0c;自动内存管理有点类似智能指针&#xff0c;基本看一下语法入门就可以大概理解&#xff0c;但是唯独宏很难理解&#xff0c;语法非常晦涩。但是功能非常强大。声明宏类似于c语言的宏处理&#xf…

【淘宝网消费类电子产品销售数据可视化】

淘宝网消费类电子产品销售数据可视化 引言数据爬取与处理数据可视化系统功能1. 总数据量分析2. 店铺总数据3. 店铺销售额排名4. 不同电子商品销售价格5. 单个商品价格排名6. 不同省份平均销量7. 不同地区的平均销售额8. 省份数量9. 每个省份有用的平均个数 创新点结语 引言 随…