样式
知识点css中的选择器
1.相邻之间无边框
2.按钮下一个有边框
代码
<template>
<div class="button-group">
<div
v-for="(label, labelIndex) in labels"
:key="labelIndex"
:class="[
newStyles.buttonGroupItem,
{ [newStyles.buttonGroupSelected]: label.isSelected },
]"
@click="handleLabelClick(label, labelIndex)"
>
{{ label.name }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
labels: [
{ name: "按钮1", isSelected: false },
{ name: "按钮2", isSelected: false },
{ name: "按钮3", isSelected: false },
// ...更多按钮
],
newStyles: {
buttonGroupItem: "button-group-item",
buttonGroupSelected: "button-group-selected",
},
};
},
methods: {
handleLabelClick(label, labelIndex) {
// 清除所有按钮的选中状态
this.labels.forEach((l) => {
l.isSelected = false;
});
// 设置被点击按钮的选中状态
label.isSelected = true;
},
},
};
</script>
<style scoped>
.button-group {
display: flex;
}
.button-group-item {
border: 1px solid #ccc;
padding: 10px;
margin: 0;
cursor: pointer;
}
.button-group-item:first-child {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.button-group-item:last-child {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.button-group-item.button-group-selected {
background-color: #007bff;
color: white;
}
/* 相邻的按钮之间不应该有边框 */
.button-group-item:not(:last-child) {
border-right: none;
}
/* 选中按钮的下一个按钮应该有左边框 */
.button-group-item.button-group-selected + .button-group-item {
border-left: 1px solid #007bff;
}
</style>