【前端组件】vue实现按钮组

样式

知识点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>