vue门户系统实现顶部菜单下拉效果

news2025/1/12 10:41:22

门户系统实现顶部菜单下拉效果

组件封装

直接上代码，已经封装成组件，只要传输正确的数据格式即可使用。

<template>
<div class="head-v3" id="index">
	<div class="navigation-up">
		<div class="navigation-inner">
			<div class="navigation-v3">
				<ul>
					<ul>
						<li v-for="i in nevigatelist" :_t_nav="i.nav" :key="i.nav">
							<div @click="!i.isChil?routerClick(i) : ''">
								<h2>
									<span href="#">{{i.label}}</span>
								</h2>
							</div>
						</li>
					</ul>
				</ul>
			</div>
		</div>
	</div>
	<div class="navigation-down">
		<div v-for="i in menuList" :id="i.remark" :class="i.remark == 'example' ? ['nav-down-menu','menu-1'] : ['nav-down-menu','menu-3','menu-1']" style="display: none;" :_t_nav="i.remark" :key="i.id">
			<div class="navigation-down-inner">
				<dl v-for="item in i.children" :key="item.id">
					<div v-if="item.children.length > 0">
						<dt v-if="item.name !=''">{{item.name}}</dt>
						<dd v-for="y in item.children" :key="y.name">
							<span class="link hoverbtn" @click="routerClick(y)">{{y.name}}</span>
						</dd>
					</div>
					<div v-else>
						<dd>
							<span class="link hoverbtn" @click="routerClick(item)">{{item.name}}</span>
						</dd>
					</div>
				</dl>
			</div>
			
		</div>
	</div>
</div>
</template>

<script>

export default {
	name: "MenuCom",
	props: {
		menuList: Array
	},	
	data() {
		return {
		 	//顶部菜单显示的数组
			nevigatelist:  [{
				id: '1',//排序
				nav: 'home',//自定义名称
				label: '平台介绍',//中文名称
				isChil: false,//如果是一级菜单直接跳转
				path: "/home" //路由
			}, {
				id: '2',
				nav: 'example',
				label: '应用实例',
				isChil: true,
				path: "/home"
			}, {
				id: '3',
				nav: 'application',
				label: '应用组件',
				isChil: true,
				path: "/home"
			}, {
				id: '4',
				nav: 'shared',
				label: '共享服务',
				isChil: true,
				path: "/home"
			}, {
				id: '5',
				nav: 'colophon',
				label: '版本记录',
				isChil: true,
				path: "/home"
			}, {
				id: '6',
				nav: 'onlinetest',
				label: '在线调试',
				isChil: false,
				path: "/onLineTest"
			}, {
				id: '7',
				nav: 'onlinestatistics',
				label: '接口调试统计',
				isChil: false,
				path: "/onLineStatistics"
			}],
			//下拉菜单显示的数组，如果是固定的下拉内容直接在data里写即可以
			// menuList:[]
		}
	},
	created() {},
	mounted() {
		console.log($('[_t_nav]'))
		var qcloud = {};
		//因为数据是组件间传输所以，需要使用定时器，不然结构已经加载完，数据都没有回填，导致没有赋值相关属性
		setTimeout(() => {
			$('[_t_nav]').hover(function() {
				// debugger
				// console.log($('[_t_nav]'))
				var _nav = $(this).attr('_t_nav');
				clearTimeout(qcloud[_nav + '_timer']);
				qcloud[_nav + '_timer'] = setTimeout(function() {
					$('[_t_nav]').each(function() {
						$(this)[_nav == $(this).attr('_t_nav') ? 'addClass' : 'removeClass']('nav-up-selected');
					});
					$('#' + _nav).stop(true, true).slideDown(200);
				}, 150);
			},function() {
				var _nav = $(this).attr('_t_nav');
				clearTimeout(qcloud[_nav + '_timer']);
				qcloud[_nav + '_timer'] = setTimeout(function() {
					$('[_t_nav]').removeClass('nav-up-selected');
					$('#' + _nav).stop(true, true).slideUp(200);
				}, 150);
			});
		},500);
	},
	methods:{
		//这里是我实际开发的路由跳转，需要根据实际开发修改
		routerClick(data) {
			// 接口页
			console.log("data",data)
			if (data.menuType == 2) {
				this.$router.push({
					name: 'Interface',
					query: {
					pdfUrl: data.path,
					name: data.name
					}
				});
				return;
			}
			// 站外链接
			if (data.isNewTab && data.menuType == 1 ) {
				window.open(data.path, '_blank');
				return;
			}
			this.$router.push({
				path: data.path,
			});
		}
	}
}
</script>
<style lang="scss" scoped>
.head-v3{position:relative;z-index:100;width:100%;}
.head-v3 .navigation-inner{margin:0 auto;width:100%;position:relative}
.navigation-up{height:60px;margin-left: 280px;}
.navigation-up .navigation-v3{float:left;_margin-left:10px}
.navigation-up .navigation-v3 ul{float:left}
.navigation-up .navigation-v3 li{float:left;font:normal 13px/59px "microsoft yahei";color:#fff}
.navigation-up .navigation-v3 .nav-up-selected{background:#344157}
.navigation-up .navigation-v3 .nav-up-selected-inpage{background:#202833}
.navigation-up .navigation-v3 li h2{font-weight:normal;padding:0;margin:0}
.navigation-up .navigation-v3 li h2 span{padding:0 10px;color:#fff;display:inline-block;height:60px;font-family:"microsoft yahei";cursor:pointer}

.navigation-down{position:absolute;top:60px;left:0px;width:100%;z-index: 9999;}
.navigation-down .nav-down-menu{width:100%;margin:0;background:#344157;position:absolute;top:0px}
.navigation-down .nav-down-menu .navigation-down-inner{margin:auto;width:1200px;position:relative;display: flex;
    justify-content: center;}
.navigation-down .nav-down-menu dl{float:left;margin:18px 80px 18px 0}
.navigation-down .menu-1 dl{margin:30px 30px 30px 0}
.navigation-down .menu-1 dt{width:210px;font:normal 16px "microsoft yahei";font-weight: bold; color:#fff;padding-bottom:10px;border-bottom:1px solid #61789e;margin-bottom:10px}
.navigation-down .menu-1 dd {margin-bottom: 2px;}
.navigation-down .menu-1 dd span{color:#fff;font:normal 14px/30px "microsoft yahei";cursor:pointer}
.navigation-down .menu-1 dd span:hover{color:#60aff6}
//.navigation-down .menu-1 dd a{color:#fff;font:normal 14px/30px "microsoft yahei"}
//.navigation-down .menu-1 dd a:hover{color:#60aff6}
//.navigation-down .menu-2 dd a,.navigation-down .menu-3 dd a{color:#fff;font:normal 16px "microsoft yahei"}

</style>