element ui 对话框el-dialog关闭事件详解

通常会有需求，在关闭弹框后需要清空填写的数据，这时候就需要关闭事件了

<el-dialog title="标题" :visible.sync="bind" size="small" @close='closeDialog'>
</el-dialog>

在标签中加入@close='closeDialog'

mothods中加入

//关闭弹框的事件
closeDialog(){
 this.xxx = '';//清空数据
},

以上这篇element ui 对话框el-dialog关闭事件详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

您可能感兴趣的文章:

  • js Dialog 去掉右上角的X关闭功能
赞 (0)

相关推荐

  • js Dialog 去掉右上角的X关闭功能

    再用到 dialog弹出框时,不想要右上角的X 关闭功能,只是做个提示信息显示. 在网上找了一些资料.网上找了三种解决方案:[第一种是可用的.] 1. 复制代码 代码如下: $("#div1").dialog({ closeOnEscape:false, open:function(event,ui){$(".ui-dialog-titlebar-close").hide();} }); 不希望用户通过jquery dialog 提供的x按钮关闭弹出框,这种方法的作

  • element ui 对话框el-dialog关闭事件详解

    通常会有需求,在关闭弹框后需要清空填写的数据,这时候就需要关闭事件了 <el-dialog title="标题" :visible.sync="bind" size="small" @close='closeDialog'> </el-dialog> 在标签中加入@close='closeDialog' mothods中加入 //关闭弹框的事件 closeDialog(){ this.xxx = '';//清空数据 },

  • Bootstrap 模态框自定义点击和关闭事件详解

    模态框避免点击背景处关闭: 1.div初始化时添加属性 aria-hidden="true" data-backdrop="static" <div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden='true'

  • Vue自定义事件(详解)

    前面的话 父组件使用props传递数据给子组件,子组件怎么跟父组件通信呢?这时,Vue的自定义事件就派上用场了.本文将详细介绍Vue自定义事件 事件绑定 每个 Vue 实例都实现了事件接口 (Events interface),即 使用 $on(eventName) 监听事件 使用 $emit(eventName) 触发事件 [注意]Vue 的事件系统分离自浏览器的EventTarget API.尽管它们的运行类似,但是 $on 和 $emit 不是addEventListener 和 disp

  • Android 广播大全 Intent Action 事件详解

    具体内容如下所示: Intent.ACTION_AIRPLANE_MODE_CHANGED; //关闭或打开飞行模式时的广播 Intent.ACTION_BATTERY_CHANGED; //充电状态,或者电池的电量发生变化 //电池的充电状态.电荷级别改变,不能通过组建声明接收这个广播,只有通过Context.registerReceiver()注册 Intent.ACTION_BATTERY_LOW; //表示电池电量低 Intent.ACTION_BATTERY_OKAY; //表示电池电

  • vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native

    vue运行为v-on在监听键盘事件时,添加了特殊的键盘修饰符: <input v-on:keyup.13="submit"> vue还非常贴心地给出了常用按键的别名,这样就不必去记keyCode ~ ~ 上面代码,还可以在这样写: <input v-on:keyup.enter="submit"> <input @keyup.enter="submit"> 全部的键盘别名: .enter .tab .delet

  • Angular4.x Event (DOM事件和自定义事件详解)

    Angular组件和DOM元素通过事件与外部进行通信,两者中的事件绑定语法是相同的-(eventName)="expression": <button (click)="onClick()">Click</button> DOM元素 DOM 元素触发的一些事件通过 DOM 层级结构传播,事件首先由最内层的元素开始,然后传播到外部元素,直到它们到根元素,这种传播过程称为事件冒泡. DOM事件冒泡与Angular可以无缝工作,具体示例如下: im

  • javascript数据代理与事件详解分析

    javascript数据代理与事件详解分析

    目录 数据代理与事件 回顾Object.defineProperty方法 何为数据代理 Vue中的数据代理 事件的基本使用 事件的修饰符 键盘事件 数据代理与事件 星光不负赶路人,满身花香蝶自来 回顾Object.defineProperty方法 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>回顾Object.defineproperty方法<

  • 封装一个更易用的Dialog组件过程详解

    封装一个更易用的Dialog组件过程详解

    目录 场景 搭建环境 创建组件 创建调用组件的hook函数 Dialog的缓存.隐藏 隐藏 缓存 完整代码 总结 场景 在项目中,我们经常会遇到使用弹窗的场景,但有时组件库自带的弹窗不能满足我们的需求,需要我们自己封装,这时我们如何去自定义一个更加方便调用的弹窗? 搭建环境 首先我们需要搭建一个Vue3+ts的环境. 用vite的官方模板: yarn create vite demo-app --template vue-ts 进入并安装依赖 cd demo-app yarn 依赖安装完成后启动

  • nginx pod hook钩子优雅关闭示例详解

    目录 一.系统环境 二.前言 三.pod hook(pod钩子) 四.如何优雅的关闭nginx pod 一.系统环境 服务器版本 docker软件版本 Kubernetes(k8s)集群版本 CPU架构 CentOS Linux release 7.4.1708 (Core) Docker version 20.10.12 v1.21.9 x86_64 Kubernetes集群架构:k8scloude1作为master节点,k8scloude2,k8scloude3作为worker节点 服务器

  • JSP中EL表达式的用法详解(必看篇)

    EL 全名为Expression Language EL 语法很简单,它最大的特点就是使用上很方便.接下来介绍EL主要的语法结构: ${sessionScope.user.sex} 所有EL都是以${为起始.以}为结尾的.上述EL范例的意思是:从Session的范围中,取得 用户的性别.假若依照之前JSP Scriptlet的写法如下: User user =(User)session.getAttribute("user"); String sex =user.getSex( );

随机推荐