这是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
冒泡和默认操作阻止均无济于事。当最大选择的颜色,不应触发水平波纹管切换按钮(禁止使用禁用状态)。
最佳答案
底部的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>