yangfeng
2023-12-12 1519870c0e18171ced014a840e86a459dc6b00f1
src/views/dashboard/components/TaskTabs.vue
@@ -1,28 +1,39 @@
<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">