Sidebar.vue
3.0 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<template>
<nav
class="max-[768px]:flex-[0] scroll-container w-56 bg-white shadow-lg h-[calc(100vh-4rem)] sticky top-16 overflow-y-auto"
>
<div class="md:p-4 p-2">
<h2 class="text-lg font-semibold mb-4 text-gray-700">工具分类</h2>
<ul class="space-y-1">
<li v-for="(category, index) in sortList" :key="index">
<a
:href="`#term-${category.id}`"
@click.stop="toggleCategory($event, category.id, index)"
class="w-full flex items-center justify-between p-3 text-[#515c6b] hover:text-[#5961f9] rounded-lg hover:bg-gray-100 transition-colors"
>
<div class="flex items-center space-x-2">
<i
class="iconfont text-sm"
:class="[`icon-${category.icon}`]"
></i>
<span class="text-sm">{{ category.label }}</span>
</div>
<div v-if="category.children">
<el-icon
size="14px"
color="#515c6b"
v-show="activeCategory !== index"
>
<ArrowRightBold />
</el-icon>
<el-icon
size="14px"
color="#515c6b"
v-show="activeCategory === index"
>
<ArrowDownBold />
</el-icon>
</div>
</a>
<transition name="slide">
<ul v-show="activeCategory === index" class="ml-4 space-y-0.5">
<li
v-for="(subItem, subIndex) in category.children"
:key="subItem.id"
>
<a
:href="`#term-${category.id}-${subItem.id}`"
class="block text-sm py-2 px-3 rounded hover:bg-gray-100 text-[#515c6b] hover:text-[#5961f9] transition-colors"
@click.stop=""
>
{{ subItem.label }}
</a>
</li>
</ul>
</transition>
</li>
</ul>
</div>
</nav>
</template>
<script setup lang="ts">
import type { classifyType } from "~/api/types/classify";
import { ArrowRightBold, ArrowDownBold } from "@element-plus/icons-vue";
const sortList = useState<classifyType[]>("sortTree");
// 激活的分类索引
const activeCategory = ref<number | null>(0);
const route = useRoute();
const router = useRouter();
// 切换分类展开状态
const toggleCategory = (event: any, id: number, index: number) => {
if (activeCategory.value === index) {
activeCategory.value = null;
} else {
activeCategory.value = index;
}
event?.preventDefault();
if (route.path === "/") {
document.getElementById(`term-${id}`)?.scrollIntoView({
behavior: "smooth",
block: "center",
});
} else {
router.push("/");
let timer = setTimeout(() => {
document.getElementById(`term-${id}`)?.scrollIntoView({
behavior: "smooth",
block: "center",
});
clearTimeout(timer);
}, 500);
}
};
</script>