gypsy-crm-frontend-vu/components/cwg-submenu.vue

<template>
    <view class="cwg-submenu">
        <view class="submenu">
            <view class="cwg-submenu-item" :class="{ 'active': activePath === item.path }" v-for="item in submenuItems"
                :key="item.path" @click="handleClick(item.path)">
                <text v-t="item.label"></text>
            </view>
        </view>
    </view>
</template>

<script lang="ts" setup>
import { computed, watch, nextTick } from 'vue';
import useRouter from "@/hooks/useRouter";
const router = useRouter();
import useRoute from '@/hooks/useRoute'
const route = useRoute()
interface MenuItem {
    key: string;
    label: string;
    icon?: string;
    children?: MenuItem[];
}
const props = defineProps({
    submenuItems: {
        type: Array as () => MenuItem[],
        default: () => []
    }
})
const activePath = computed(() => route.path + (route.query?.type ? `?type=${route.query.type}` : '') || '')
const emit = defineEmits(['submenu-click']);
function handleClick(path: string) {
    if (route.path !== path) {
        router.push(path);
    }
}
</script>

<style scoped lang="scss">
@import "@/uni.scss";

.cwg-submenu {
    width: 100%;

    .submenu {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: px2rpx(8);
        padding: px2rpx(8) px2rpx(8) px2rpx(8) px2rpx(32);
        box-sizing: border-box;
    }

    .cwg-submenu-item {
        width: 100%;
        height: px2rpx(40);
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: px2rpx(10);
        box-sizing: border-box;
        font-size: 14px;

        &:hover {
            background: rgba(108, 133, 149, 0.12) !important;
            border: 1px solid rgb(145, 163, 176) !important;
            border-radius: px2rpx(4);
        }

        &.active {
            background: rgba(108, 133, 149, 0.12) !important;
            border-radius: px2rpx(4);
        }
    }
}
</style>