codecheck

1
<script setup lang="ts">
2
interface Props {
3
  name: string;
4
}
5
const props = defineProps<Props>();
6

7
const slots: any = useSlots();
8
const tabTitles = ref(slots.default().map((tab: any) => tab.props.title));
9
// const selectedTitle = ;
10
const selectedTitle = useState(props.name, () => tabTitles.value[0]);
11

12
provide("selectedTitle", selectedTitle);
13

14
const emit = defineEmits(["tab"]);
15

16
const clickTab = (title: string) => {
17
  emit("tab", title);
18
  selectedTitle.value = title;
19
};
20
</script>
21

22
<template>
23
  <div class="tabs">
24
    <button
25
      v-for="title in tabTitles"
26
      :key="title"
27
      @click="clickTab(title)"
28
      class="tabs__tab"
29
      :class="{ tab_active: selectedTitle == title }"
30
    >
31
      {{ title }}
32
    </button>
33
  </div>
34
  <div class="tabs__body">
35
    <slot class="tabs__top" name="top" />
36
    <slot class="tabs__main" />
37
    <slot class="tabs__bottom" name="bottom" />
38
  </div>
39
</template>
40

41
<style scoped lang="scss">
42
.tabs {
43
  border-bottom: 1px var(--color-border-primary) solid;
44
  &__top {
45
  }
46
  &__body {
47
    display: flex;
48
    flex-direction: column;
49
    gap: 1rem;
50
    margin-top: 2rem;
51
    padding: 0 1rem;
52
  }
53
  &__tab {
54
    background: none;
55
    padding: 1rem 1.2rem;
56
    font-size: 1rem;
57
    margin-bottom: -1px;
58
    border-bottom: 1px var(--color-border-primary) solid;
59
    &.tab_active {
60
      color: var(--color-primary);
61
      // background: rgba(128, 128, 128, 0.225);
62
      border-bottom: 1px var(--color-primary) solid;
63
    }
64
  }
65
}
66
</style>
67