vue中el-dialog弹窗关闭

记录一下前端弹窗关闭方式(又摸了一上午的鱼 -_-!!!)
说实话，作为一个后端人员，去写前端我真的是。。。更重要的是各个项目用的还不是一样的框架（嗯，真好啊~~~）

父页面代码

<template>
	
	<div>
		<el-button
          	size="mini"
            type="text"
            icon="el-icon-plus"
          	@click="handleAdd(scope.row, 'add')"
        >
	        新增
	    </el-button>
	    
		<!-- 新增、编辑 页面弹窗 -->
	    <menu-form
	      :modalType="modalType"
	      :menuInfo="menuInfo"
	      v-if="menuVisible"
	      :visible.sync="menuVisible"
	    />
	</div>
</template>

# 引入子页面
<script>
import MenuForm from './MenuForm'

export default {
	components: { MenuForm },
	data: {
		return {
    		menuVisible: false,
    		modalType: null, // add-新增菜单; edit-编辑菜单;
    	};
	},
    methods: {
    	/** 新增按钮事件 menuInfo：参数  type：add-新增  edit-编辑 */
	    handleAdd(menuInfo, type) {
	      this.menuInfo = menuInfo
	      this.modalType = type
	      this.menuVisible = true
	    },
    };
}
</script>

子页面代码

<template>
  <!-- 新增、编辑 -->
  <el-dialog
    title="提示"
    width="30%"
    :before-close="close"
    @close="close"
    :close-on-click-modal="true"
    :visible.sync="menuVisible" // 这里必须这样写(具体原因没看懂官方是什么意思 -_-!!)，
  >

    <span>这是一段信息</span>
    <span slot="footer" class="dialog-footer">
      <el-button @click="cancellation">取 消</el-button>
      <el-button type="primary" @click="menuVisible = false">确 定</el-button>
    </span>

  </el-dialog>
</template>

<script>

export default {
  data() {
    return {
      menuVisible: false
    };
  },
  mounted() {
    this.menuVisible = this.visible
  },
  computed: { },
  props: {
    visible: { // 父页面传递过来的visible值，用visible接收，而不是使用 menuVisible 接收
      type: Boolean,
      default: false,
    },
    menuInfo: Object, // 菜单对象,新增时就是父级菜单，编辑时就是当前菜单
    modalType: String // add-新增菜单; edit-编辑菜单;
    // batchPermit:Object,
  },
  methods: {
    cancellation() { // 取消
    	// this.menuVisible = false;
      	// this.$confirm('确认关闭？')
      	//   .then(_ => {
      	//     done();
      	//   })
      	//   .catch(_ => {});
      	this.$emit("update:visible", false);
    },
    close() {
      this.$emit("update:visible", false);
    }
  }
};
</script>

<style lang="stylus" scoped>
</style>

补充一点

close 是点击“X”关闭之前做的一些事情，比如：关闭弹框。
before-close 是点击提交之后做的一些事情，比如：清空表格内容。
参考链接： https://blog.csdn.net/m0_63775072/article/details/128169975

<template>
  <!-- 新增编辑企业 -->
  <el-dialog
    title="提示"
    width="30%"
    :before-close="closeDialog"
    @close="visibles"
    :close-on-click-modal="true"
    :visible.sync="menuVisible"
  >

    <span>这是一段信息</span>
    <span slot="footer" class="dialog-footer">
      <el-button @click="cancellation">取 消</el-button>
      <el-button type="primary" @click="menuVisible = false">确 定</el-button>
    </span>

  </el-dialog>
</template>

<script>

export default {
  data() {
    return {
      menuVisible: false
    };
  },
  methods: {
	visibles() {
	},
	closeDialog(done) {
	}

  }
}
</script>