termcap/src/components/head.vue

<template>
  <div
    class="head"
    data-tauri-drag-region
  >
    <div
      ref="scrollItem"
      class="head-items"
    >
      <template
        v-for="(item, index) in list"
        :key="index"
      >
        <div
          class="head-items-item"
          :class="{ active: index === selectTab }"
          @click.stop="e => onChange(index, 'change')"
        >
          <div>
            <div>
              <Icon
                :name="item.icon"
                :size="item.size"
              />
              {{ item.label }}
            </div>
            <Icon
              :style="`opacity:${index === 0 ? 0 : 1} ;`"
              name="close"
              :size="12"
              @click.stop="onChange(index, 'del')"
            />
          </div>
        </div>
      </template>
    </div>
    <div
      class="head-add"
      @click="emit('update:showAdd', true)"
    >
      <Icon
        name="add"
        :size="15"
      />
    </div>
  </div>
</template>
<script setup lang='ts'>
import { ref, watch } from 'vue'
import { FormData } from '@/components/edit.vue'

const props = withDefaults(defineProps<{
  showAdd?: boolean,
  list: FormData[],
  selectTab: number
}>(), {
  showAdd: false,
  selectTab: 0,
  list: () => []
})
const scrollItem = ref()

const emit = defineEmits<{(evt: 'update:showAdd', value: boolean): void,
  (evt: 'update:list', value: FormData[]): void,
  (evt: 'onChange', value: { id: number, type: string }): void,
}>()

function onChange(id: number, type: string) {
  if (id === 0 && type === 'del') return
  emit('onChange', { id, type })
}

watch(() => props.selectTab, (v) => {
  setTimeout(() => {
    // 滚动
    const dom = scrollItem.value.children[v]
    const scrollNum = dom.offsetLeft - scrollItem.value.offsetWidth / 2 + dom.offsetWidth / 2
    scrollItem.value.scrollLeft = scrollNum
  }, 0)
})

</script>
<style lang="scss" scoped>
.head {
  width: 100%;
  height: 38px;
  user-select: none;
  text-shadow: 0px -2px -4px var(--shadow-color);
  display: flex;
  align-items: flex-end;
  background: #ccc;
  overflow: hidden;
  color: var(--font-color);

  &-items {
    max-width: 85%;
    margin-left: 70px;
    display: flex;
    align-items: flex-end;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 0 12px;
    cursor: pointer;

    /* 隐藏滚动条 */
    &::-webkit-scrollbar {
      width: 0 !important;
      display: none;
    }

    &-item {
      height: 34px;
      font-size: 13px;
      color: var(--font-color);
      padding: 6px 8px 0 8px;
      position: relative;

      &>div {
        display: flex;
        align-items: center;
        justify-content: space-between;

        &>svg {
          margin-top: 2px;
          margin-left: 3px;
          cursor: pointer;
        }

        &>div {
          display: flex;
          align-items: center;

          &>svg {
            margin-right: 5px;
          }
        }
      }

      &::after {
        content: '';
        height: 15px;
        width: 2px;
        border-radius: 3px;
        background: #ddd;
        position: absolute;
        right: -2px;
        top: 50%;
        transform: translate(0, -50%);
      }
    }

    .active {
      background: white;
      border-radius: 8px 8px 0 0;
      position: relative;
      box-shadow: 8px 8px 0 0 #ffffff, -8px 8px 0 0 #ffffff;

      &::before {
        content: '';
        position: absolute;
        left: -8px;
        bottom: 0;
        width: 8px;
        height: 33px;
        background: #ccc;
        border-radius: 0 0 8px 0;
      }

      &::after {
        content: '';
        position: absolute;
        right: -8px;
        bottom: 0;
        width: 8px;
        height: 33px;
        background: #ccc;
        border-radius: 0 0 0 8px;
      }

    }
  }

  &-add {
    height: 70%;
    margin-left: 5px;
    -webkit-app-region: no-drag;
    cursor: pointer;
  }
}
</style>