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;
相关文章
相关标签/搜索