From ffa8de2ab74c2397752f92d0239e0d7635fb9e7d Mon Sep 17 00:00:00 2001
From: haoxuan <haoxuan>
Date: 星期一, 05 二月 2024 18:48:16 +0800
Subject: [PATCH] 拦截器增加跳转
---
src/views/dashboard/components/TaskTabs.vue | 31 +++++++++++++++++++------------
1 files changed, 19 insertions(+), 12 deletions(-)
diff --git a/src/views/dashboard/components/TaskTabs.vue b/src/views/dashboard/components/TaskTabs.vue
index d2e3311..e942cf3 100644
--- a/src/views/dashboard/components/TaskTabs.vue
+++ b/src/views/dashboard/components/TaskTabs.vue
@@ -1,45 +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<{
/** 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">
$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;
@@ -70,7 +77,7 @@
position: absolute;
left: 50%;
margin-left: -10px;
- bottom: -10px;
+ bottom: -8px;
display: none;
}
.active.triangle-tip:before {
--
Gitblit v1.8.0