javascript - Vue 有条件地阻止事件传播给子级

Question

这是 ColorButtonGroup Vue 组件(仅限模板)的示例，它用作复选框/切换按钮组，并且有最大限制。选择的选项(在本例中为 4 种颜色)。

它使用 ToggleButton 组件，该组件作为简单的切换选择并应用样式，是我们在项目中必须使用的常见组件之一。

<template>  
  <div
    class="color-button-group"
    :class="[typeClass, variationClass]">
    <ToggleButton
      v-for="(item, index) in items"
      :key="index"
      :color="item.color"
      :type="type"
      @click.native="validateClick"
      @change="onChange(item.id)" />
  </div>
</template>

我已经通过方法和事件处理程序实现了所需的所有逻辑，一切正常，但也可以在 max 后以可视方式切换按钮。已选择。

当前行为:

期望的行为:

如何有条件地防止事件传播到子元素？

stopPropagation 和 preventDefault 因为冒泡和默认操作预防没有帮助。

当最大时。选择颜色后，不应触发级别波纹管切换按钮(禁用状态不允许使用)。

Answer 1

底部 ToggleButton 组件必须通过添加新的属性 toggleable 进行修改，默认情况下为 true ，上部 ColorButtonGroup 控制何时变为 false。

<template>  
  <div
    class="color-button-group"
    :class="[typeClass, variationClass]">
    <ToggleButton
      v-for="(item, index) in items"
      :key="index"
      :color="item.color"
      :type="type"
      :toggleable="isValidSelection()"
      @change="onChange(item.id)" />
  </div>
</template>
<script>
  export default {
    data() {
      return {
        selected: [],
      };
    },
    methods: {
      isValidSelection() {
        if (this.selected.length < this.maxSelect)
          return true;
        return false;
      },
      onChange(item) {
        if (this.isSelected(item)) {
          this.selected = this.selected.filter(val => val !== item);
        } else if (this.isValidSelection()) {
          this.selected.push(item);
        }
      },
    },
  };
</script>