wenbao-website/src/components/content/TagBar.vue

<template>
  <!-- 单选标签选择按钮条，可显示一行标签，然后高亮选中项 -->
  <ScrollRect scroll="horizontal">
    <div class="tags">
      <div
        :class="[
          'tag-button',
          { 'active': tag.id === selectedTag },
        ]"
        v-for="tag in tags"
        :key="tag.id"
        @click="emit('update:selectedTag', tag.id ?? tag)"
      >
        {{ tag.name?? tag }}
      </div>
    </div>
  </ScrollRect>
</template>

<script setup lang="ts">
import type { PropType } from 'vue';
import { ScrollRect } from '@imengyu/vue-scroll-rect';

defineProps({	
  /**
   * 标签列表
   */
  tags: {
    type: Object as PropType<Array<{
      id: number|string,
      name: string,
    }>>,
    required: true,
  },
  /**
   * 选中的标签，可双向绑定
   */
  selectedTag: {
    type: [Number,String],
    default: null,
  }
})

const emit = defineEmits([	
  "update:selectedTag"	
])
</script>

<style scoped lang="scss">
.tags {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  overflow-x: auto;
  margin-bottom: 10px;
  min-width: 1000px;
}
.tag-button {
  display: flex;
  flex-direction: row;
  align-items: center;
  background-color: var(--color-box-inset);
  color: var(--color-text);
  padding: 10px;
  margin-right: 4px;
  cursor: pointer;
  user-select: none;

  &:hover {
    background-color: var(--color-box-hover);
  }
  &:active, &.active {
    color: var(--color-text-light);
    background-color: var(--color-primary);
  }
}
</style>