Vue.js如何阻止子组件的点击事件？

原创

喵喵侠

发布于 2024-08-06 20:19:29

2930

发布于 2024-08-06 20:19:29

前言

你好，我是喵喵侠。在实际开发中，我们有时候会遇到需要控制子组件行为的需求。比方说我最近遇到一个问题，我需要在特定场景下，在父页面禁用子组件的点击事件，包括不限于子组件本身以及子组件内部子组件的点击事件。下面我将使用 Ant Design Vue 框架实现一个示例，来展示如何在 Vue.js 中阻止子组件的点击事件。

问题描述

在表单业务中，有一个封装的子组件（包含 input 和 modal）。正常情况下，点击 input 会触发弹窗，用户选择弹窗中的列表项后，列表项的名称会填充到 input 中。然而，弹窗的查询需要依赖外部表单的两个选择框是否有值。如果选择框的值为空，则弹窗中的查询结果将为空，这个显然不是我想要的。

为了保证每次弹窗查询的列表是有值的，我要做的是，当外部表单的两个选择框为空时，阻止子组件的点击事件，并给用户弹出错误提示。当两个选择框都有值的情况下，子组件可以正常点击操作，触发弹窗。

解决方案

经过了我的一番研究后，得出了实现两种方案：

在子组件中添加 prop 进行条件判断。
在子组件外部覆盖一层透明遮罩。

方案一：在子组件中添加 `prop` 进行条件判断

首先，在父组件中定义 prop 来传递选择框的状态。

<template>
  <a-row>
    <a-col :span="8">
      <a-select v-model:value="firstSelect" placeholder="请选择第一项">
        <a-select-option value="option1">选项1</a-select-option>
        <a-select-option value="option2">选项2</a-select-option>
      </a-select>
    </a-col>
    <a-col :span="8">
      <a-select v-model:value="secondSelect" placeholder="请选择第二项">
        <a-select-option value="option1">选项1</a-select-option>
        <a-select-option value="option2">选项2</a-select-option>
      </a-select>
    </a-col>
    <a-col :span="8">
      <MyComponent :isEnabled="isInputEnabled" @showError="handleError" />
    </a-col>
  </a-row>
</template>

<script>
export default {
  data() {
    return {
      firstSelect: null,
      secondSelect: null,
    };
  },
  computed: {
    isInputEnabled() {
      return this.firstSelect !== null && this.secondSelect !== null;
    }
  },
  methods: {
    handleError(message) {
      this.$message.error("请先选择前两项");
    }
  }
};
</script>

然后，在子组件中根据 prop 的值判断是否允许点击。

<template>
  <div>
    <a-input @click="handleClick" placeholder="点击弹出模态窗口" />
    <a-modal v-model:visible="isModalVisible">
      <p>模态窗口内容</p>
    </a-modal>
  </div>
</template>

<script>
export default {
  props: {
    isEnabled: {
      type: Boolean,
      required: true
    }
  },
  data() {
    return {
      isModalVisible: false
    };
  },
  methods: {
    handleClick() {
      if (this.isEnabled) {
        this.isModalVisible = true;
      } else {
        this.$emit("showError", true);
      }
    }
  }
};
</script>

注意：错误提示的信息，在子组件里面emit不要写死，而是在父组件接受handleError后再进行处理，避免组件全局污染。

方案二：在子组件外部覆盖一层透明遮罩

在父组件中，通过动态显示透明遮罩来阻止点击事件。

<template>
  <a-row>
    <a-col :span="8">
      <a-select v-model:value="firstSelect" placeholder="请选择第一项">
        <a-select-option value="option1">选项1</a-select-option>
        <a-select-option value="option2">选项2</a-select-option>
      </a-select>
    </a-col>
    <a-col :span="8">
      <a-select v-model:value="secondSelect" placeholder="请选择第二项">
        <a-select-option value="option1">选项1</a-select-option>
        <a-select-option value="option2">选项2</a-select-option>
      </a-select>
    </a-col>
    <a-col :span="8" style="position: relative">
      <div class="overlay" v-if="!isInputEnabled" @click="handleError"></div>
      <MyComponent />
    </a-col>
  </a-row>
</template>

<script>
export default {
  data() {
    return {
      firstSelect: null,
      secondSelect: null
    };
  },
  computed: {
    isInputEnabled() {
      return this.firstSelect !== null && this.secondSelect !== null;
    }
  },
  methods: {
    handleError() {
      this.$message.error("请先选择前两项");
    }
  }
};
</script>

<style>
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  z-index: 1;
}
</style>

如果你需要更加精准的定位，可以调整元素的定位位置和宽高。