yangfeng
2024-03-29 82e27d0cadbddfc73e8b978e778b802dc8e51fa1
src/views/dashboard/components/TaskTabs.vue
@@ -1,41 +1,52 @@
<template>
  <div class="task-tabs">
    <div
      v-for="tabName in list"
      :key="tabName"
      v-for="tab in list"
      :key="tab.value"
      class="task-tab-item triangle-tip"
      :class="{ active: props.modelValue === tabName }"
      @click="selectTab(tabName)"
      :class="{ active: props.modelValue === tab.value }"
      @click="selectTab(tab)"
    >
      {{ tabName }}
      {{ tab.label }}
    </div>
  </div>
</template>
<script setup lang="ts">
import { useVModel } from '@vueuse/core'
export interface LabelValue {
  label: string
  value: any
}
const props = defineProps<{
  list: string[]
  modelValue?: string
  /** tab 列表*/
  list: LabelValue[]
  /** 当前选中的 tab*/
  modelValue?: any
}>()
const emit = defineEmits(['update:modelValue'])
const emit = defineEmits<{
  'update:modelValue': [tabName: string]
  change: [tab: LabelValue]
}>()
const data = useVModel(props, 'modelValue', emit)
function selectTab(tabName: string) {
  data.value = tabName
function selectTab(tab: LabelValue) {
  data.value = tab.value
  emit('change', tab)
}
</script>
<style scoped lang="scss">
$active-bg: #6b83ff;
$tab-bg: #0b4694;
$tab-height: 50px;
$tab-height: 46px;
.task-tabs {
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: $tab-height;
  font-size: 20px;
  font-size: 18px;
  .task-tab-item {
    background-color: $tab-bg;
@@ -66,7 +77,7 @@
    position: absolute;
    left: 50%;
    margin-left: -10px;
    bottom: -10px;
    bottom: -8px;
    display: none;
  }
  .active.triangle-tip:before {