vue 父组件想判断所有子组件弹窗是否有打开

vue |

vue + element
情况，希望在子组件有弹窗打开时，父组件的一些快捷键功能不要触发，因此需要知道子组件弹窗的打开状态。
父组件一个页面
子组件可以有多个页面

子组件 1
通过 computed 以及 watch 监听状态，将开启和关闭状态返回到父组件，代码示例如下

1
2
3
4
5
6
7
8
9
10
11
<el-dialog :visible.sync="isVisible"></el-dialog>
computed: {
	dialogState() {
		return this.isVisible
	}
}
watch: {
	dialogState(val) {
		return this.$emit('dialogState', val)
	}
}

子组件 2
子组件 2 有多个 el-dialog 弹窗，也是使用 computed 以及 watch 监听，代码如下

1
2
3
4
5
6
7
8
9
10
11
12
<el-dialog :visible.sync="isVisible"></el-dialog>
<el-dialog :visible.sync="isVisible2"></el-dialog>
computed: {
	dialogState() {
		return this.isVisible || this.isVisible2
	}
}
watch: {
	dialogState(val) {
		return this.$emit('dialogState', val)
	}
}

父组件
监听弹窗状态的函数我们使用了相同的函数

  • 定义一个 dialogOpenCount 计数器，初始为 0
  • 在 dialogState 方法中，为 true dialogOpenCount 加 1，为 false，dialogOpenCount 减 1
    • 如果减到 0，表示两个子组件的弹窗都关闭了
    • 如果还大于 0，表示还有弹窗打开
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      <com1 @dialogState="dialogState"></com1>
      <com2 @dialogState="dialogState"></com2>

      data () {
      	return {
      		dialogOpenCount: 0
      	}
      }
      methods: {
      	// 两个检查子组件弹窗是否显示的判断
      	dialogState(val) {
      		if (val) {
      			this.dialogOpenCount++
      		} else {
      			this.dialogOpenCount--
      		}
      	}
      }