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

2024-08-06 20:19:29 浏览数 (2)

目录

  • 前言
  • 问题描述
  • 解决方案
    • 方案一：在子组件中添加 prop 进行条件判断
    • 方案二：在子组件外部覆盖一层透明遮罩
  • 总结

前言

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

问题描述

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

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

解决方案

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

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

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

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

代码语言：vue复制
<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 的值判断是否允许点击。

代码语言：vue复制
<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后再进行处理，避免组件全局污染。

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

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

代码语言：vue复制
<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>

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

总结

在 Vue.js 中阻止子组件的点击事件有多种方式可供选择。通过在子组件中添加 prop 进行条件判断，可以明确传递状态控制子组件行为，但需要修改子组件代码，增加了耦合度。而通过在子组件外部覆盖一层透明遮罩，可以保持子组件的独立性和复用性，且实现简单，而且很巧妙。

综合考虑，方案二更为灵活和实用，不需要改动子组件代码，适合大多数场景，而且实现起来非常快。在实际开发中，我们可以根据具体需求选择合适的方法来实现子组件的点击事件控制。希望这篇文章能为你在 Vue.js 开发中遇到类似问题时提供一些思路和帮助。

组件化 组件设计 腾讯技术创作特训营S8 vue.js ant-design-vue

0 人点赞