vue3+ts顶部导航自定义图片

UI设计如图所示，导航栏菜单的hover和选中状态都是这样

1715312854446.png

代码如下

<template>
    <!-- 顶部导航栏 -->
    <ul class="header_menus flex align-center ml-20">
        <li :class="{ active: activeIndex === index }" v-for="(item, index) in menusList" @click="setActive(index)">{{ item.name }}</li>
    </ul>
</template>
<script setup lang='ts'>
import { ref } from 'vue'
const activeIndex = ref(0)
const menusList = ref([
    { name: '首页', id: 0, path: '/home' },
    { name: '镜像', id: 1, path: '/1' }
])
const setActive = (val: number) => {
    activeIndex.value = val
}
</script>
<style lang='scss' scoped>
/** 自定义公共样式 */
// .flex { display: flex; }
// .align-center {
//     align-items: center;
// }
// .ml-20 {
//     margin-left: 20px !important;
// }
.header_menus {
    >li {
        width: 100px;
        height: 64px;
        text-align: center;
        line-height: 64px;
        font-weight: 400;
        font-size: 14px;
        cursor: pointer;
        color: #000;
        position: relative;
        padding-bottom: 10px;

        &:hover, 
        &.active {
            color: $custom-primary-base;
            font-size: 16px;
            font-weight: 500;
        }

        &::after {
            content: ""; /* 伪元素需要content属性 */
            position: absolute; /* 绝对定位 */
            left: 39%;
            bottom: 18%; /* 定位到底部 */
            width: 22px; /* 宽度与菜单项宽度相同 */
            height: 7px; /* 自定义图片的高度 */
            background: url('/src/assets/image/menu_border.svg') repeat-x center; /* 背景图片设置为自定义图片 */
            background-size: cover; /* 背景图片覆盖整个伪元素区域 */
            transition: opacity 0.3s ease; /* 添加过渡效果 */
            opacity: 0; /* 默认隐藏伪元素 */
        }

        &:hover::after,
        &.active::after {
            opacity: 1; /* 鼠标悬停时显示伪元素 */
        }
    }
}
</style>