traffic-laser/src/components/group-button/index.vue

<template>
  <ButtonPane class="menus" :size="size" :dire="dire">
    <div
      v-for="menu in menus"
      :key="menu.key"
      class="menu"
      :style="menuStyle"
      :class="{ active: activeKey === menu.key, dire }"
      @click="menu.onClick && menu.onClick(menu)"
    >
      <template v-if="$slots.default">
        <slot :data="menu" />
      </template>
      <ui-icon :type="menu.icon || 'close'" class="icon" v-else/>
      <p v-if="menu.text">{{ menu.text }}</p>
    </div>
  </ButtonPane>
</template>

<script setup lang="ts">
import ButtonPane from '@/components/button-pane/index.vue'
import UiIcon from "@/components/base/components/icon/index.vue";
import {computed} from "vue";

type Menu =  {
  key: any,
  text?: string,
  icon?: string,
  onClick?: (menu: Menu) => void
}

const props = withDefaults(
  defineProps<{ menus: Menu[], activeKey?: any, dire?: 'row' | 'column', size?: number }>(),
  {dire: 'row', size: 64}
)

const menuStyle = computed(() => {
  const offset = props.size / 4;
  return props.dire === 'row'
    ? {
        padding: `0 10px`,
        marginRight: '8px'
      }
    :
      {
        padding: `10px 0 `,
        marginBottom: '8px'
      }
})
</script>

<style lang="scss" scoped>
.menu {
  min-width: 56px;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  height: 100%;
  text-align: center;
  transition: color .3s ease;
  color: #fff;
  border-radius: 4px;

  &.active,
  &:hover {
    color: var(--colors-primary-base);
  }

  &.active {
    background: rgba(255, 255, 255, 0.1);;
  }

  .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex: 1;
  }

  p {
    line-height: 17px;
    font-size: 12px;
    white-space:nowrap;
  }
}
</style>