文章描述了一个使用Vue.js编写的组件，该组件模仿京东首页设计，通过鼠标悬停时显示不同菜单下的动态内容，数据来自一个JSON文件。作者分享了组件模板和部分状态管理代码。
效果图，无聊之前仿京东首页写的
悬浮在不同菜单就显示不同的内容，当然京东这个列表菜单太多了，写个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: "/",
text4: "内衣"
},
{
id: 6,
text1: "美妆",
interval1: "/",
text2: "个护清洁",
interval2: "/",
text3: "宠物",
interval3: "",
text4: ""
},
{
id: 7,
text1: "女鞋",
interval1: "/",
text2: "箱包",
interval2: "/",
text3: "钟表",
interval3: "/",
text4: "珠宝"
},
{
id: 8,
text1: "男鞋",
interval1: "/",
text2: "运动",
interval2: "/",
text3: "户外",
interval3: "",
text4: ""
},
{
id: 9,
text1: "房产",
interval1: "/",
text2: "汽车",
interval2: "/",
text3: "汽车用品",
interval3: "",
text4: ""
},
{
id: 10,
text1: "母婴",
interval1: "/",
text2: "玩具乐器",
interval2: "",
text3: "",
interval3: "",
text4: ""
},
{
id: 11,
text1: "食品",
interval1: "/",
text2: "酒类",
interval2: "/",
text3: "生鲜",
interval3: "/",
text4: "特产"
},
{
id: 12,
text1: "艺术",
interval1: "/",
text2: "礼品鲜花",
interval2: "/",
text3: "农牧园艺",
interval3: "",
text4: ""
},
{
id: 13,
text1: "医药保健",
interval1: "/",
text2: "计生情趣",
interval2: "",
text3: "",
interval3: "",
text4: ""
},
{
id: 14,
text1: "图书",
interval1: "/",
text2: "文娱",
interval2: "/",
text3: "教育",
interval3: "/",
text4: "电子书"
},
{
id: 15,
text1: "机票",
interval1: "/",
text2: "酒店",
interval2: "/",
text3: "旅游",
interval3: "/",
text4: "生活"
},
{
id: 16,
text1: "支付",
interval1: "/",
text2: "白条",
interval2: "/",
text3: "保险",
interval3: "/",
text4: "企业金融"
},
{
id: 17,
text1: "安装",
interval1: "/",
text2: "维修",
interval2: "/",
text3: "清洗",
interval3: "/",
text4: "二手"
},
{
id: 18,
text1: "工业品",
interval1: "/",
text2: "元器件",
interval2: "",
text3: "",
interval3: "",
text4: ""
}
]);
interface X {
id?: number,
title: string,
};
let hideNum = ref({ num: -1 });
let titleTypeList = ref([{ title: "" }]);
let titleType: X[][] = reactive([
[
{
id: 1,
title: "家电馆"
},
{
id: 2,
title: "开店设备一站购"
}
],
[
{
id: 1,
title: "手机频道"
},
{
id: 2,
title: "网上营业厅"
},
{
id: 3,
title: "配件频道"
}
],
[
{
id: 1,
title: "电脑办公"
},
{
id: 2,
title: "企业采购"
},
{
id: 3,
title: "GAME+"
},
{
id: 4,
title: "装机大师"
},
{
id: 5,
title: "企业租赁"
},
{
id: 6,
title: "国产精选"
}
],
[
{
id: 1,
title: "家装城"
},
{
id: 2,
title: "居家日用"
},
{
id: 3,
title: "精品家具"
},
{
id: 4,
title: "家装建材"
},
{
id: 5,
title: "国际厨具"
},
{
id: 6,
title: "装修服务"
},
{
id: 7,
title: "企业采购"
}
],
[
{
id: 1,
title: "男装"
},
{
id: 2,
title: "女装"
},
{
id: 3,
title: "童装童鞋"
},
{
id: 4,
title: "内衣"
}
],
[
{
id: 1,
title: "清洁用品",
},
{
id: 2,
title: "美妆馆"
},
{
id: 3,
title: "个护馆"
},
{
id: 4,
title: "宠物馆"
}
],
[
{
id: 1,
title: "时尚箱包"
},
{
id: 2,
title: "品质鞋履"
},
{
id: 3,
title: "潮流珠宝"
},
{
id: 4,
title: "奢侈品"
},
{
id: 5,
title: "鞋包企业购"
}
],
[
{
id: 1,
title: "体育服务"
},
{
id: 2,
title: "运动城"
},
{
id: 3,
title: "户外馆"
},
{
id: 4,
title: "健身馆"
},
{
id: 5,
title: "骑行馆"
},
{
id: 6,
title: "钟表城"
},
{
id: 7,
title: "钟表企业购"
}
],
[
{
id: 1,
title: "新车装备"
},
{
id: 2,
title: "油卡充值"
},
{
id: 3,
title: "企业采购"
}
],
[
{
id: 1,
title: "母婴"
},
{
id: 2,
title: "玩具乐器"
},
{
id: 3,
title: "奶粉馆"
},
{
id: 4,
title: "尿裤馆"
},
{
id: 5,
title: "京东国际母婴"
}
],
[
{
id: 1,
title: "生鲜"
},
{
id: 2,
title: "地方物产"
},
{
id: 3,
title: "京东国际美食"
}
],
[
{
id: 1,
title: "京东礼品"
},
{
id: 2,
title: "火机烟具"
},
{
id: 3,
title: "鲜花"
},
{
id: 4,
title: "三农频道"
},
{
id: 5,
title: "畜牧养殖"
},
{
id: 6,
title: "京东花园"
},
{
id: 7,
title: "企业采购"
}
],
[
{
id: 1,
title: "专科用药"
},
{
id: 2,
title: "滋补养生"
},
{
id: 3,
title: "膳食补充"
},
{
id: 4,
title: "健康监测"
},
{
id: 5,
title: "两性生活"
},
{
id: 6,
title: " 靓眼视界"
},
{
id: 7,
title: "大健康企业购"
}
],
[
{
id: 1,
title: "图书"
},
{
id: 2,
title: "文娱",
},
{
id: 3,
title: "电子书"
},
{
id: 4,
title: "文娱寄卖商城"
},
{
id: 5,
title: "图书企业购"
}
],
[
{
id: 1,
title: "本周热推"
},
{
id: 2,
title: "精选酒店"
},
{
id: 3,
title: "特惠机票"
},
{
id: 4,
title: "主题乐园"
},
{
id: 5,
title: "电影票"
}
],
[
{
id: 1,
title: "金融首页"
}
],
[
{
id: 1,
title: "京东服务+"
},
{
id: 2,
title: "京东小家"
},
{
id: 3,
title: "安装服务"
},
{
id: 4,
title: "维修服务"
},
{
id: 5,
title: "清洁保养"
},
{
id: 6,
title: "企悦服务"
},
{
id: 7,
title: "特色服务"
}
],
[
{
id: 1,
title: "开器件"
},
{
id: 2,
title: "企业专享"
},
{
id: 3,
title: "PLUS会员"
},
{
id: 4,
title: "工品优选"
},
{
id: 5,
title: "企业购"
}
]
],
);
// interface subdivideType {
// id: number,
// type: string,
// list: {
// id: number,
// name: string
// }[]
// }
let subdivideList =ref([])
axios.get('../../../../static/subdivide.json').then((res)=>{
// console.log(res.data)
subdivideList= res.data
});
let subdivideDefaultList = ref([{ type: "", list: [{ name: "" }] }])
// 方法
let typeFun = (e:number) => {
titleTypeList.value = titleType[e];
hideNum.value.num = e;
subdivideDefaultList.value = subdivideList[e];
}
let hideDrawer = () => {
hideNum.value.num = -1;
}
</script>
<style scoped lang="less">
.nav-left {
width: 30%;
position: relative;
.type {
display: flex;
margin: 6px 0;
span {
margin: 0 3px;
}
.text:hover {
color: var(--fontColor);
cursor: pointer;
}
}
.type>div,
span {
font-size: 16px;
}
;
}
// 导航弹框
.drawer {
position: absolute;
bottom: 0;
left: 100%;
z-index: 1;
width: 1060px;
height: 100%;
background: var(--white);
padding-left: 19px;
.title-list {
display: flex;
.icon-fanhui {
transform: rotate(180deg);
font-size: 16px;
}
}
.title-list>div {
background: #000;
color: var(--white);
padding:2px 5px;
margin: 10px var(--defaultInterval) 8px var(--defaultInterval);
display: flex;
// height:19px;
div {
font-size: var(--miniFont);
line-height:22px;
}
}
.title-list>div:nth-child(1) {
margin-left: 0;
}
.subdivide-box {
.title-type {
display: flex;
margin-top: var(--defaultInterval);
.title {
margin-right: var(--defaultInterval);
display: flex;
font-size: var(--miniFont);
width:76px;
height: 100%;
.icon-fanhui {
transform: rotate(180deg);
font-size: 16px;
// display: flex;
// flex-direction: column;
// justify-content: center;
}
}
.type-box {
display: flex;
flex-wrap: wrap;
width: 94%;
}
.type-box>div {
margin-right: var(--defaultInterval);
font-size: var(--miniFont);
}
}
}
}
</style>
json文件太多字符了，上传不了。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
