<template>
<van
-tabbar v
-model="active" :placeholder="true" :route="true" fixed>
<van
-tabbar
-item replace v
-for="(item, index) in tabbarData" :key="index" :icon="item
.icon" :to="item
.to">
<span class="tabbar_sp">{{ item
.title }}</span>
<template #icon="props">
<div class="tabbar_icon" v
-html="getSvgIcon(item
.icon, props
.active)"></div>
</template>
</van
-tabbar
-item>
</van
-tabbar>
</template>
<script setup>
const { t } = useI18n();
const active = ref(0);
const tabbarData = reactive([
{
icon: `<svg t="1760085025618" class="icon" viewBox="0 0 102
4 102
4" version="1
.1" xmlns="http://www
.w3
.org/2000/svg" p
-id="1686" width="20" height="20"><path d="M611
.15 627
.3c
-25
.55 2
4.06
-58
.96 37
.31
-9
4.08 37
.31
-35
.42 0
-69
.0
4-13
.45
-9
4.67
-37
.87
-12
.39
-11
.81
-32
.02
-11
.3
4-43
.83 1
.06
-11
.81 12
.39
-11
.3
4 32
.02 1
.06
43
.83 37
.21 35
.46 86
.02
54.99 137
.44 54.99 50
.98 0 99
.48
-19
.2
4 136
.58
-54.17 12
.46
-11
.7
4 13
.05
-31
.36 1
.32
-43
.82
-11
.7
4-12
.48
-31
.36
-13
.07
-43
.82
-1
.33z" fill="#333333" p
-id="1687"></path><path d="M78
4.43 306
.03L590
.75 190
.91a1
41
.6
49 1
41
.6
49 0 0 0
-1
44.8
4 0L252
.22 306
.03c
-42
.76 25
.42
-69
.32 72
.1
-69
.32 121
.8
4v286
.15c0 78
.16 63
.58 1
41
.7
4 1
41
.7
4 1
41
.7
4H712c78
.16 0 1
41
.7
4-63
.58 1
41
.7
4-1
41
.7
4V
427
.87c0
.01
-49
.7
4-26
.55
-96
.43
-69
.31
-121
.8
4z m7
.32
407
.98c0
43
.97
-35
.77 79
.7
4-79
.7
4 79
.7
4H32
4.65c
-43
.97 0
-79
.7
4-35
.77
-79
.7
4-79
.7
4V
427
.87c0
-27
.98 1
4.9
4-54.25 39
-68
.55L
477
.58 2
44.2c12
.57
-7
.47 26
.65
-11
.2
40
.7
4-11
.2s28
.18 3
.73
40
.7
4 11
.2l193
.68 115
.12c2
4.05 1
4.3 39
40
.56 39 68
.55v286
.1
4z" fill="#333333" p
-id="1688"></path></svg>`,
title: computed(() => t("home
.tabbar
.home")),
to: {
name: "home"
}
},
{
icon: `<svg t="17600850950
47" class="icon" viewBox="0 0 102
4 102
4" version="1
.1" xmlns="http://www
.w3
.org/2000/svg" p
-id="18
47" width="20" height="20"><path d="M873
.8 62
4.7l
-2
4.2
-108
.3c
-7
.9
-35
.5
-7
.4-72
.8 1
.6
-108
.1l21
.5
-8
4.4c10
.8
-42
.7
-4.6
-87
-39
.4-113
-18
.4-13
.7
-40
.1
-21
-62
.9
-21H692c
-18
.4-32
.9
-53
.5
-55
.2
-93
.8
-55
.2h
-331c
-59
.2 0
-107
.3
48
.1
-107
.3 107
.3v601
.8c0 17
.1 13
.9 31 31 31s31
-13
.9 31
-31V700
.5h3
45
.5c1
4.6 32
.5
46
.6 55
.2 83
.7 55
.2h119
.1c33
.6 0 65
.8
-16
.6 85
.9
-44.3 18
-2
4.7 2
4.4-56
.3 17
.7
-86
.7zM221
.9 39
4.2V2
42
.1c0
-25 20
.3
-45
.3
45
.3
-45
.3h331c25 0
45
.3 20
.3
45
.3
45
.3v351
.1c0 25
-20
.3
45
.3
-45
.3
45
.3H221
.9V39
4.2z m58
4.2 280
.7c
-8
.7 11
.9
-21
.7 18
.8
-35
.8 18
.8H651
.2c
-3
.6 0
-7
.1
-0
.7
-10
.4-2 38
.1
-16
.5 6
4.8
-54.4 6
4.8
-98
.5V252h6
4.7c9
.3 0 18
.2 3 25
.8 8
.7 1
4.6 10
.9 21 29
.7 16
.4 48L791 393
.1c
-11
.3
44.6
-12 91
.9
-2 136
.9l2
4.2 108
.3c3 12
.9 0
.3 26
.3
-7
.1 36
.6z" fill="#333333" p
-id="18
48"></path></svg>`,
title: computed(() => t("home
.tabbar
.task")),
to: {
name: "task"
}
},
{
icon: `<svg t="1760085118582" class="icon" viewBox="0 0 102
4 102
4" version="1
.1" xmlns="http://www
.w3
.org/2000/svg" p
-id="2007" width="20" height="20"><path d="M
495
.19 190
.0
4a229
.893 229
.893 0 0 1 38
.03 33
.1
4c21
.08 22
.89 38
.1 50
.57 50
.61 82
.27 1
4.41 36
.51 19
.3
4 69
.65 21 86
.16l7
.82 77
.81c1
.66 16
.56 22
.99 2
4.05 35
.9 12
.62l60
.66
-53
.75
4.63
-4.1c30
.78 39
.45 52
.65 76
.76 65
.23 111
.33 7
.66 21
.06 11
.89
41
.28 12
.56 60
.1 0
.6
4 17
.99
-1
.81 3
4.62
-7
.51 50
.86
-8
.43 2
4.03
-2
4.27
46
.76
-47
.08 67
.56
-17
.33 15
.81
-38
.63 30
.52
-63
.42
43
.82 9
.91
-61
.31
-11
.76
-11
4.22
-62
.58
-151
.02
-19
.07
-13
.81
-3
4.18
-28
.53
-44.91
-43
.76
-7
.31
-10
.37
-12
.46
-20
.75
-15
.31
-30
.86
-1
.61
-5
.7
-2
.49
-11
.26
-2
.63
-16
.5l
-1
.77
-68
.38c
-0
.4-15
.6
4-19
.01
-2
4.77
-33
-16
.21l
-61
.18 37
.46C370
.57 518
.6 323
.7 580 312
.92 651
.09c
-3
.87 25
.51
-2
.61 50
.08 1
.8
4 73
.0
4-5
.69
-4.48
-11
.05
-9
.01
-16
.06
-13
.57
-31
.38
-28
.54-48
.65
-57
.37
-52
.8
-88
.13
-4.55
-33
.75 7
.1
-70
.56 3
4.65
-109
.42 29
.27
-41
.3 66
.63
-71
.35 86
.28
-85
.58 50
.8
-36
.79 89
.86
-100
.55 116
.1
-189
.51
4.98
-16
.87 9
.02
-33
.12 12
.26
-47
.88m
-48
.57
-88
.56l
-1
.2
4 12
.77c
-0
.19 1
.97
-20
.2
4 197
.62
-116
.51 267
.3
4-22
.68 16
.42
-65
.82 51
.17
-100
.01 99
.39
-35
.98 50
.76
-50
.95 100
.8
-44.48 1
48
.73 11
.85 87
.8
4 95
.18 163
.62 2
47
.67 225
.2
4l0
.03
-0
.0
4c6
.66
-8
.88 6
.36
-20
.76
-0
.68
-29
.37
-22
.73
-27
.78
-68
.08
-93
.69
-57
.08
-166
.28 8
.17
-53
.89
45
.78
-101
.6
4 111
.89
-1
42
.12 0
.21 8
.11 1
.39 18
.28
4.66 29
.89 7
.47 26
.46 27
.79 66
.27 82
.22 105
.68 38
.07 27
.57
49
.6
4 66
.98 3
4.39 117
.15
-11
.87 39
.05
-36
.13 70
.17
-36
.38 70
.48
-5
.73 7
.26 1
.36 17
.25 10
.7
4 15
.13h0
.01c2
.15
-0
.49 53
.3
-12
.23 111
.2
-41
.35 3
4.17
-17
.19 63
.55
-36
.88 87
.3
-58
.54 30
.03
-27
.39 51
.13
-58 62
.71
-91 31
.7
4-90
.44-7
.19
-197
.47
-115
.71
-318
.12l
-7
.06
-7
.85
-53
.7
47
.58c
-2
.23
-22
.2
4-8
.27
-59
.53
-2
4.56
-100
.82
-15
.08
-38
.22
-35
.87
-71
.88
-61
.8
-100
.0
4-32
.52
-35
.32
-73
.17
-61
.98
-120
.82
-79
.23l
-12
.79
-4.62z" fill="#333333" p
-id="2008"></path></svg>`,
title: computed(() => t("home
.tabbar
.promotion")),
to: {
name: "promotion"
}
},
{
icon: `<svg t="176008
4905289" class="icon" viewBox="0 0 102
4 102
4" version="1
.1" xmlns="http://www
.w3
.org/2000/svg" p
-id="1525" width="20" height="20"><path d="M67
4.77 315
.62v
-96
.51c0
-26
.03
-21
.1
-47
.13
-47
.13
-47
.13H
475
.65c
-161
.68 0
-292
.7
4 131
.06
-292
.7
4 292
.7
4v253
.09c0 76
.29 61
.85 138
.1
4 138
.1
4 138
.1
4H715
.4c76
.29 0 138
.1
4-61
.85 138
.1
4-138
.1
4V
439
.77L67
4.77 315
.62z m
-68
.4 471
.9
4H318
.69c
-37
.22 0
-67
.39
-30
.17
-67
.39
-67
.39V
46
4.73c0
.09
-123
.86 100
.48
-22
4.25 22
4.3
4-22
4.3
4h130
.72v
547
.17z m178
.9
-67
.2
4c
-0
.08 37
.16
-30
.23 67
.2
4-67
.39 67
.2
4h
-40
.21V
403
.51l108
.1
4 69
.9
4-0
.54 2
46
.87z" fill="#333333" p
-id="1526"></path><path d="M399
.72
416c
-18
.89 0
-3
4.2 15
.31
-3
4.2 3
4.2s15
.31 3
4.2 3
4.2 3
4.2h69
.77c18
.89 0 3
4.2
-15
.31 3
4.2
-3
4.2s
-15
.31
-3
4.2
-3
4.2
-3
4.2h
-69
.77zM
469
.49 555
.87h
-69
.77c
-18
.89 0
-3
4.2 15
.31
-3
4.2 3
4.2s15
.31 3
4.2 3
4.2 3
4.2h69
.77c18
.89 0 3
4.2
-15
.31 3
4.2
-3
4.2s
-15
.31
-3
4.2
-3
4.2
-3
4.2z" fill="#333333" p
-id="1527"></path></svg>`,
title: computed(() => t("home
.tabbar
.Introduction")),
to: {
name: "Introduction"
}
},
{
icon: `<svg t="17600851
48297" class="icon" viewBox="0 0 102
4 102
4" version="1
.1" xmlns="http://www
.w3
.org/2000/svg" p
-id="2167" width="20" height="20"><path d="M509
.77
540
.6
4c111
.78 0 202
.72
-90
.9
4 202
.72
-202
.72S621
.55 135
.2 509
.77 135
.2s
-202
.72 90
.9
4-202
.72 202
.72 90
.9
4 202
.72 202
.72 202
.72z m0
-3
43
.43c77
.59 0 1
40
.72 63
.12 1
40
.72 1
40
.72s
-63
.12 1
40
.72
-1
40
.72 1
40
.72c
-77
.59 0
-1
40
.72
-63
.13
-1
40
.72
-1
40
.72s63
.13
-1
40
.72 1
40
.72
-1
40
.72zM718
.48 621
.29H303
.1
4c
-8
4.06 0
-152
.45 68
.39
-152
.45 152
.45v66
.78c0 17
.12 13
.88 31 31 31 17
.12 0 31
-13
.88 31
-31v
-66
.78c0
-49
.87
40
.57
-90
.45 90
.45
-90
.45h
415
.3
4c
49
.87 0 90
.45
40
.57 90
.45 90
.45v66
.78c0 17
.12 13
.88 31 31 31s31
-13
.88 31
-31v
-66
.78c0
-8
4.06
-68
.39
-152
.45
-152
.45
-152
.45z" fill="#333333" p
-id="2168"></path></svg>`,
title: computed(() => t("home
.tabbar
.main")),
to: {
name: "main"
}
}
]);
// 改变tabbar颜色
const getSvgIcon = (originSvg, isActive) => {
let color = isActive ? '#
4EADF8' : '#999999';
return originSvg
.replace(/#333333/g, color);
}
</script>
<style lang="scss" scoped>
.tabbar_sp {
font
-weight: 550;
font
-size: 10px;
color: #223
46
4;
}
:deep(
.van
-tabbar) {
.van
-tabbar
-item
--active {
.tabbar_icon {
animation: van
-tabbar
-item
-active 0
.3s ease
-in
-out;
}
}
}
@keyframes van
-tabbar
-item
-active {
20% {
transform: scale(0
.9);
}
100% {
transform: scale(1);
}
}
</style> 修改代码 增加点击状态下的另一种svg显示 并且是渐变色
本文介绍了一个开源项目PGModeler，这是一个强大的ER图设计工具，帮助开发者进行数据库概念设计、逻辑设计和物理设计。
扫一扫
910
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
