前端工作笔记-element ui弹窗嵌套并获取输入

主要是在界面上，如果点击个弹窗，再弹窗中，还需要弹出一个框，进行输入查询。目前此笔记就记录了这个！

程序运行截图如下：

点击弹窗：

点击查询,第二层窗口弹出，输入数据：

点击确定并退出，即可：

程序结构如下：

源码如下：

Dialog.vue

<template>
  <div>
    <el-button type="text" @click="outerVisible = true">点击打开外层 Dialog</el-button>
 
    <el-dialog title="外层 Dialog" :visible.sync="outerVisible">
      <OutDialog :openInDialogFunc="openInDialog" :InDlgValue="inputValue"></OutDialog>
      <el-dialog
        width="50%"
        title="内层 Dialog"
        :visible.sync="innerVisible"
        append-to-body>
        <InDialog :closeInDialogFunc="closeInDialog" @inputDlgValue="getInDialogValue"></InDialog>
      </el-dialog>
      <div slot="footer" class="dialog-footer">
        <el-button @click="outerVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
 
<script>
  import OutDialog from './OutDialog'
  import InDialog from './InDialog'
  export default {
    components:{
      OutDialog,
      InDialog
    },
    methods: {
 
      getInDialogValue(val){
 
          //子传父获取值
          this.inputValue = val;
          console.log("子传父：" + this.inputValue)
      },
 
      openInDialog(){
 
          this.innerVisible = true
      },
      closeInDialog(){
 
        this.innerVisible = false
      }
    },
    data() {
      return {
        outerVisible: false,
        innerVisible: false,
        inputValue : ""
      };
    }
  }
</script>

HelloWorld.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <Dialog></Dialog>
  </div>
</template>
 
<script>
  import Dialog from './Dialog'
export default {
 
  components:{
    Dialog
  },
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

InDialog.vue

<template>
  <div>
    <el-input v-model="input" placeholder="请输入内容"></el-input>
    <br/>
    <br/>
    <el-row>
      <el-button type="primary" @click="onSubmit">确定并退出</el-button>
    </el-row>
  </div>
</template>
 
<script>
  export default {
    props:{
      closeInDialogFunc: {
        type: Function,
        default: null
      }
    },
    data() {
      return {
        input: ''
      }
    },
    methods: {
      onSubmit() {
 
        if (this.closeInDialogFunc){
 
          this.$emit("inputDlgValue", this.input)
          this.closeInDialogFunc()
        }
      }
    }
  }
</script>

OutDialog.vue

<template>
  <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="输入数据">
      <el-input v-model="formInline.user" placeholder="输入数据"></el-input>
    </el-form-item>
    <el-form-item label="选择数据">
      <el-input v-model="InDlgValue" placeholder="选择数据">
      </el-input>
    </el-form-item>
    <br/>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">查询</el-button>
    </el-form-item>
  </el-form>
</template>
 
<script>
  export default {
    props: {
      openInDialogFunc: {
        type: Function,
        default: null
      },
      InDlgValue:{
        type: String,
        default: null
      }
    },
    data() {
      return {
        formInline: {
          user: '',
          region: ''
        }
      }
    },
    methods: {
      onSubmit() {
 
        if(this.openInDialogFunc)
          this.openInDialogFunc()
      }
    }
  }
</script>
 
<style scoped>
 
</style>

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
 
Vue.config.productionTip = false
 
Vue.use(ElementUI);
 
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})