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组件必须通过添加默认为 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>

Vue防止事件有条件地传播给孩子

1 个答案: