element ui Dialog before-close的使用方法,before-close调用不规则before-close一直调用/执行

这篇具有很好参考价值的文章主要介绍了element ui Dialog before-close的使用方法,before-close调用不规则before-close一直调用/执行。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

 before-close绑定的方法一直被调用:原因是因为这个“()”,将括号去掉就可以

element ui Dialog before-close的使用方法,before-close调用不规则before-close一直调用/执行

 before-close使用方法文章来源地址https://www.toymoban.com/news/detail-504679.html

<template>
	<div>

		<el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>
		<!-- :before-close="handleClose" 绑定一个函数:handleClose -->
		<el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
			<span>这是一段信息</span>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				dialogVisible: false
			};
		},
		methods: {
			handleClose(done) {
				this.$confirm('确认关闭?')
					.then(_ => {
						// 关闭方法-上方传的参数done
						done();
					})
					.catch(_ => {});
			}
		}
	};
</script>

到了这里,关于element ui Dialog before-close的使用方法,before-close调用不规则before-close一直调用/执行的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Element UI | Upload 使用submit方法手动上传文件

    点击上传文件按钮不立刻进行上传,而是点击提交后再调用上传接口,和表单一起提交。 js:  判断文件没有上传即先进行文件上传,上传文件成功后在调用表单上传接口,否则直接调用接口上传表单。submit为element ui内部方法。表单上传接口一般传递文件id。

    2024年02月15日
    浏览(41)
  • vue/Element UI 实现Element UI el-dialog 自由拖动

    前言: 最近有个项目,客户要求弹窗可拖动,但是由于elemen ui本身的弹窗并没有拖动的属性,无法满足客户的需求。 于是我百度找到了几篇文章,终于可以实现客户的需求! 请往下看↓↓ 一、新建一个目录:utils 二、创建drag .js文件 三、创建directive.js 文件 四、main.js文件中

    2024年02月02日
    浏览(67)
  • element-ui弹框dialog无故关闭问题

    element-ui弹框dialog无故关闭问题 引起原因,鼠标在dialog内按下滑动到外层遮罩后出发了遮罩的关闭事件,修改方法如下: 源文件中找到目录element-dev =packages =dialog =src = component.vue,替换点击事件@click.self=“handleWrapperClick”,代码如下,修改完成后打包 npm run dist,找到你的项目

    2024年02月12日
    浏览(43)
  • element ui dialog可拉伸放大缩小和拖动

    鼠标放到对话框头部可以拖动对话框、双击头部可以放大对话框 鼠标放到对话框左右两侧可以拖动对话框宽度、放到下边可以拖动对话框高度、放到右下角高度宽度可以同时缩放 或者单独写一个js将Vue.directive(\\\'dialogDrag\\\', { ………… } )中的代码放入其中如:     这样就可以,

    2024年02月15日
    浏览(40)
  • Vue2使用element-ui引入自定义主题的方法(使用在线主题生成工具)

    第一步 :按照官方文档使用npm安装element-ui,并完整引入Element-ui npm i element-ui -S  main.js中所有的内容删去,改为 随便写点东西,run一下 成功引入element-ui,但是不喜欢默认的蓝色,看起来很烂大街,想换掉。 第二步 :由于不喜欢默认的蓝色主题,可以使用在线主题生成工具

    2024年02月14日
    浏览(53)
  • element-ui / element-plus dialog 自定义层级

    背景:          微前端集成后主子应用的dialog 层级冲突导致主应用的弹窗被覆盖, 主子应用的弹窗都是append 到body 下的,  z-index 自动生成   尝试方案:          1. 根据官方Api 给弹窗添加自定义class, 并通过设置自定义 class 样式来控制;                  == 无效, 因为生

    2024年02月11日
    浏览(58)
  • element-ui dialog遮罩层在最上层,关掉dialog遮罩层还在

    代码中使用了dialog,dialog中点击某个按钮,又嵌套了一个dialog。 导致最外层的dialog出现后一直被遮罩层遮住,点击确定关掉dialog遮罩层还在。 element-ui的dialog组件有这几个参数:  其中,append-to-body 嵌套的dialog必须指定为true 加上后,遮罩层不再遮挡上层  

    2024年02月11日
    浏览(41)
  • 解决element -ui 中message在dialog遮盖层下面

    最简单的方法: 在标签上加入 :z-index=\\\"1000\\\"  因为消息弹窗的 z-index 一般在2001,而对话框的 z-index 在3000左右。字需要降低层级即可 效果图  

    2024年02月12日
    浏览(41)
  • Element ui关闭el-dialog时清除数据

    如果是按叉叉关闭或者点表单以外空白处关闭的话 可以给el-dialog添加    在methods里添加函数 如果是按取消按钮清除数据,也可以给取消按钮绑定点击事件,点击取消则调用closeForm函数。 注意: 要为每个 form-item 加上 prop 属性,要不然无法清空 resetFields() 方法是重置表单,重

    2024年02月11日
    浏览(49)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包