el-dialog弹窗监听传值
时间:2019-10-08
本文章向大家介绍el-dialog弹窗监听传值,主要包括el-dialog弹窗监听传值使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
这个城市看过美也看过丑陋,看过豪华的当然更多是简陋,我们试着在这钢筋结构中,搓出一点火星将渴望自由灵魂解救
假期结束背上你的行囊,起航
[ 在这里感谢"我是一名好程序员" https://www.cnblogs.com/wangqi2019/]
话不多说这个小demo是这个样子的
点击新建按钮( 父组件新建按钮 )使弹窗显示也就是elementUI中的el-dialog( 需要自己改结构和样式 )
弹窗( 子组件弹窗 )显示后输入内容相对应操作,点击叉号或取消按钮隐藏并清空输入的所有内容,点击提交成功后隐藏弹窗并清空输入的内容,
操作的时候会涉及到传值问题父子传值( dialogFormVisible控制显示隐藏true显示、false隐藏 )
新建vue文件用来创建弹窗 common -> createVenue( 子组件 )
<template> <div class="createNewFormBox"> <el-dialog title="新建场馆" :visible.sync="dialogFormVisible"> <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" > <el-form-item label="场馆编号" prop="name" class="el_btn_from"> <el-input v-model="ruleForm.name" placeholder="请输入场馆编号" ></el-input> </el-form-item> <el-form-item class="bottomBtn"> <el-button type="primary" @click="submitForm('ruleForm')" style="background:#688EF7;width:97px" >提交</el-button > <el-button @click="resetForm('ruleForm')" style="width:97px" >取消</el-button > </el-form-item> </el-form> </el-dialog> </div> </template> <script> import "element-ui/lib/theme-chalk/index.css"; import "iview/dist/styles/iview.css"; export default { components: {},
//监听 watch: { isFlag() { this.dialogFormVisible = true; } },
//通过props传一个布尔( 属性传值 ) props: { isFlag: Boolean }, data() { return { // dialogFormVisible控制显示隐藏 dialogFormVisible: false,隐藏状态 formLabelWidth: "120px", ruleForm: { name: "" }, rules: { name: [{ required: true, message: "请输入场馆编号", trigger: "blur" }] } }; }, methods: { // 提交事件 submitForm(formName) { this.$refs[formName].validate(valid => { if (valid) { this.newList(); this.$Message.success("提交成功"); this.$refs[formName].resetFields(); this.dialogFormVisible = false; // 提交成功后隐藏弹窗 } else { this.$Message.error("请输入完整信息"); return false; } }); }, // 取消事件 resetForm(formName) { this.$refs[formName].resetFields(); this.dialogFormVisible = false; // 点击取消隐藏弹窗
} } }; </script>
在对应的组件中也就是父组件通过点击事件使弹窗显示
使用这个弹窗的组件中先引入 import CreateVenue from "../../common/createVenue/index"; 随便放一个位置使用 并绑定在子组件中传来的属性 <CreateVenue :isFlag="flage"></CreateVenue> data中定义一个flag为false data() { return { flage: false { }, 点击事件中改变flag this.flage = !this.flage;
原文地址:https://www.cnblogs.com/home-/p/11634411.html
- golang 几种字符串的连接方式
- 整理ING
- dg broker校验失败的一个奇怪问题(二) (r8笔记第51天)
- Jdbc知识点全整理,你值得拥有 (2)
- 抓住“新代码”的影子 —— 基于GoAhead系列网络摄像头多个漏洞分析
- Python 用OPEN读文件报错 ,路径以及r
- python 如何设置多线程
- R语言读CSV、txt文件方式以及read.table read.csv 和readr(大数据读取包)
- python 多进程设置 整理版本1
- 11g Dataguard中的snapshot standby特性(r8笔记第49天)
- 物化视图刷新结合ADG的尝试 (r8笔记第47天)
- 关于CPU使用率高的awr分析(r8笔记第46天)
- 图形工具和命令行的博弈-swingbench配置(r8笔记第63天)
- 手把手教你用LDA特征选择
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 教你如何用Paddle.js开发智能化微信小程序
- Spark+Kudu的广告业务项目实战笔记(一)
- Java的新未来:逐渐“Kotlin化”
- 用 GitLab 做 CI/CD 是什么感觉,太强了!!
- 避坑指南:通过expdp/impdp迁移数据的7个坑
- 组复制背景 | 全方位认识 MySQL 8.0 Group Replication
- kubernete编排技术六:RBAC权限控制
- Redis 的过期策略是如何实现的?
- 记一次线上问题及反思
- 用 Redis 散列实现短网址生成器|文末福利
- 原创|面试官:Java对象一定分配在堆上吗?
- 频繁FGC的真凶原来是它
- 类加载器知识点吐血整理
- ThreadPoolExecutor 线程池"源码分析"
- 一起刷 leetcode 之螺旋矩阵(头条和美团真题)