| | |
| | | <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<{ |
| | | /** tab 列表*/ |
| | | list: string[] |
| | | list: LabelValue[] |
| | | /** 当前选中的 tab*/ |
| | | modelValue?: string |
| | | modelValue?: any |
| | | }>() |
| | | 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"> |