自定义多菜单列表_自定义菜单模板可配置-CSDN博客

本文链接：https://blog.csdn.net/qq_24015705/article/details/135591151

文章描述了一个使用Vue.js编写的组件，该组件模仿京东首页设计，通过鼠标悬停时显示不同菜单下的动态内容，数据来自一个JSON文件。作者分享了组件模板和部分状态管理代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图，无聊之前仿京东首页写的
悬浮在不同菜单就显示不同的内容，当然京东这个列表菜单太多了，写个json文件给整麻了。
在这里插入图片描述

这里是我写组件的代码，整个菜单组件的代码

<template>
    <div class="nav-left">
        <div @mouseleave="hideDrawer">
            <div class="type" v-for="(item, id) in typeList" :key="id" @mouseenter="typeFun(id)">
                <div class="text">{
   {
    item.text1 }}</div>
                <div v-if="item.interval1 != ''">{
   {
    item.interval1 }}</div>
                <div class="text" v-if="item.text2 != ''">{
   {
    item.text2 }}</div>
                <div v-if="item.interval2 != ''">{
   {
    item.interval2 }}</div>
                <div class="text" v-if="item.text3 != ''">{
   {
    item.text3 }}</div>
                <div v-if="item.interval3 != ''">{
   {
    item.interval3 }}</div>
                <div class="text" v-if="item.text4 != ''">{
   {
    item.text4 }}</div>
            </div>
            <div class="drawer" v-show="hideNum.num != -1">
                <div class="title-list">
                    <div v-for="(item, id) in titleTypeList" :key="id">
                        <div>{
   {
    item.title }}</div>
                        <div class="iconfont icon-fanhui"></div>
                    </div>
                </div>
                <div class="subdivide-box">
                    <div class="title-type" v-for="(item, id) in subdivideDefaultList" :key="id">
                        <div class="title">{
   {
    item.type }} <div class="iconfont icon-fanhui"></div>
                        </div>
                        <div class="type-box">
                            <div v-for="(typeI, typeId) in item.list" :key="typeId">{
   {
    typeI.name }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import {
    ref, reactive } from 'vue';
import axios from 'axios';

let typeList = ref([
    {
   
        id: 1,
        text1: "家用电器",
        interval1: "",
        text2: "",
        interval2: "",
        text3: "",
        interval3: "",
        text4: ""
    },
    {
   
        id: 2,
        text1: "手机",
        interval1: "/",
        text2: "运营商",
        interval2: "/",
        text3: "数码",
        interval3: "",
        text4: ""
    },
    {
   
        id: 3,
        text1: "电脑",
        interval1: "/",
        text2: "办公",
        interval2: "",
        text3: "",
        interval3: "",
        text4: ""
    },
    {
   
        id: 4,
        text1: "家居",
        interval1: "/",
        text2: "家具",
        interval2: "/",
        text3: "家装",
        interval3: "/",
        text4: "厨具"
    },
    {
   
        id: 5,
        text1: "男装",
        interval1: "/",
        text2: "女装",
        interval2: "/",
        text3: "童装",
        interval3: "/"<