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

<template>
  <!-- 单选标签选择按钮条，可显示一行标签，然后高亮选中项 -->
  <div class="d-flex flex-row flex-wrap">
    <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>
</template>

<script setup lang="ts">
import type { PropType } from 'vue';

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 lang="scss">
@use '@/assets/scss/colors.scss' as *;

.tag-button {
  display: flex;
  flex-direction: row;
  align-items: center;
  background-color: $box-inset-color;
  color: $text-color;
  padding: 10px 15px;
  margin-right: 8px;
  cursor: pointer;
  user-select: none;

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