这是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之后可视地切换按钮。选择已达成。

当前行为:

javascript - Vue防止事件有条件地传播给 child-LMLPHP

所需行为:

javascript - Vue防止事件有条件地传播给 child-LMLPHP

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

stopPropagationpreventDefault冒泡和默认操作阻止均无济于事。

当最大选择的颜色,不应触发水平波纹管切换按钮(禁止使用禁用状态)。

最佳答案

底部的ToggleButton组件必须通过添加默认为true的新道具toggleable进行修改,而上部的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>

10-08 13:57
查看更多