<template>
|
<div class="task-tabs">
|
<div
|
v-for="tab in list"
|
:key="tab.value"
|
class="task-tab-item triangle-tip"
|
:class="{ active: props.modelValue === tab.value }"
|
@click="selectTab(tab)"
|
>
|
{{ 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: LabelValue[]
|
/** 当前选中的 tab*/
|
modelValue?: any
|
}>()
|
const emit = defineEmits<{
|
'update:modelValue': [tabName: string]
|
change: [tab: LabelValue]
|
}>()
|
const data = useVModel(props, 'modelValue', emit)
|
|
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;
|
.task-tabs {
|
background-color: transparent;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
height: $tab-height;
|
font-size: 20px;
|
|
.task-tab-item {
|
background-color: $tab-bg;
|
margin-right: 10px;
|
flex: 1;
|
height: $tab-height;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
position: relative;
|
border-radius: 4px;
|
cursor: pointer;
|
&:last-child {
|
margin-right: 0;
|
}
|
}
|
.active {
|
background-color: $active-bg;
|
font-weight: 600;
|
}
|
.triangle-tip:before {
|
content: '';
|
width: 0;
|
height: 0;
|
border-width: 10px 10px 0;
|
border-style: solid;
|
border-color: $active-bg transparent transparent;
|
position: absolute;
|
left: 50%;
|
margin-left: -10px;
|
bottom: -10px;
|
display: none;
|
}
|
.active.triangle-tip:before {
|
display: block;
|
}
|
}
|
</style>
|
