Element ui Dialog 对话框 组件

父组件:

<template>
   <el-button  type="primary" plain @click="Newlyadded('addOrder')">新增</el-button>
  
  <Add ref="addOrder" v-if="addOrderVisible" :visible.sync="addOrderVisible"></Add>
</template>
<script>
import Add from '子文件路径' 
  export default {
    components:{
      'Add': Add
    },
    data() {
      return {
  
  }
  methods: {
      /* ---------------------------------- 新增 ---------------------------------- */
      Newlyadded (refForm) {
        if(this.$refs[refForm]){
          this.$refs[refForm].initForm();
        }
        this.addOrderVisible= true;
      }

    }
  }
</script>

<style lang="scss" scoped>

</style>

 

  子组件:
<template>
  <!------------------------------------  新增------------------------------------>
  <el-dialog :visible.sync="visible" :show-close="false" style="margin-top: -100px;" width="75%" :modal="true" :close-on-click-modal="false" :close-on-press-escape="false">
    <h2 slot="title">新增</h2>
    <button type="button" aria-label="Close" class="el-dialog__headerbtn" @click.stop="cancelModal"><i class="el-dialog__close el-icon el-icon-close"></i></button>
    
    <div slot="footer" class="buttons-wrap">
      <el-button style="width: 150px;height: 58px;border-radius: 0;" @click.stop="cancelModal">关闭窗口</el-button>
      <el-button type="primary" style="width: 150px;height: 58px;border-radius: 0;">确定新增</el-button>
    </div>
  </el-dialog>
</template>
<script>
  export default {
    props: {
      visible: {
        type: Boolean,
        default: false
      }
    },
    data(){
      return {
        
      }
    },
    methods: {
      initForm(){
        this.orderForm = {
          fromContact: '',
          fromPhone: ''
        };
        if(this.$refs.orderForm){
          this.$refs.orderForm.resetFields();
        }
      },
      cancelModal(){
        // 关闭弹窗,触发父组件修改visible值
        this.$emit('update:visible', false);
      }
    }
  }
</script>
<style lang="scss" scoped>

</style>

 

上一篇:20210605:前期使用pyqt5做的操作流程界面化,涉及mysql代码写的太差,可以用函数复用减少代码


下一篇:记录el-dialog 去掉滚动条