<template>
<nav
class=“main
-nav”
:class=“{
‘nav
-hidden’: !isVisible,
‘at
-top’: atTop,
‘mobile
-nav’: isMobile
}”
<div class="nav
-brand">
<img
src="@/assets/logo.png"
alt="品牌Logo"
class="nav
-logo"
@click="handl
eLogoClick"
>
</div>
<!
-- 桌面
导航 -->
<div v
-if="!isMobile" class="desktop
-nav">
<a
v
-for="
(item, index
) in
menuItems"
:key="`nav
-${index}`"
class="nav
-link"
:class="{ active: activeAnchor === item.anchor }"
@click="handleNavClick
(item.anchor
)"
>
{{ item.title }}
<div class="link
-underline"></div>
</a>
</div>
<!
-- 移动端汉堡
菜单 -->
<div
v
-else
class="hamburger"
:class="{ open: isMobile
MenuOpen }"
@click.stop="toggleMobile
Menu"
>
<span class="bar">22</span>
<span class="bar">33</span>
<span class="bar">44</span>
</div>
<!
-- 移动端
导航菜单 -->
<transition name="slide
-down">
<div v
-if="isMobile
MenuOpen" class="mobile
-nav
-menu">
<a
v
-for="
(item, index
) in
menuItems"
:key="`m
-nav
-${index}`"
class="mobile
-nav
-link"
:class="{ active: activeAnchor === item.anchor }"
@click="handleNavClick
(item.anchor
)"
>
{{ item.title }}
</a>
</div>
</transition>
</nav>
</template>
<script>
export default {
name: ‘MainNav’,
props: {
menuItems: Array,
isVisible: Boolean,
atTop: Boolean,
isMobile: Boolean
},
data
() {
return {
isMobile
MenuOpen: false
}
},
mounted
() {
window.addEventListener
(‘resize’, this.handleResize
)
},
beforeDestroy
() {
window.removeEventListener
(‘resize’, this.handleResize
)
},
watch: {
isMobile
(val
) {
if
(!val
) this.isMobile
MenuOpen = false
}
},
methods: {
handleResize
() {
this.$emit
(‘update:isMobile’,window.innerWidth <= 768
);
// 处理特定尺寸的响应式逻辑
},
toggleMobile
Menu() {
this.isMobile
MenuOpen = !this.isMobile
MenuOpen
document.body.style.overflow = this.isMobile
MenuOpen ? ‘hidden’ : ‘auto’
if
(this.isMobile
MenuOpen
) {
document.addEventListener
(‘click’,this.close
MenuOnClickOutside,true
);
}
else {
document.removeEventListener
(‘click’,this.close
MenuOnClickOutside,true
);
}
},
close
MenuOnClickOutside
(event
) {
if
(!this.$
el.contains
(event.target
)) {
this.isMobile
MenuOpen = false
document.body.style.overflow = 'auto'
}
},
handleNavClick
(anchor
) {
this.$emit
('nav
-click', anchor
)
this.isMobile
MenuOpen = false
},
handl
eLogoClick
() {
window.scrollTo
({ top: 0, behavior: 'smooth' }
)
}
}
}
</script> 给我加上
element的国际化，多种语言（中文、繁体中文、英文、日文、俄语、西班牙语等）可以切换，移动端也要，并且需要安装什么配置什么也要告诉我，一步一步给我写清楚，不要省略步骤和代码
本文介绍如何在Element UI的el-menu组件中正确设置:default-openeds属性，避免菜单展开时出现的重复值导致的收起菜单功能失效的Bug。在动态获取菜单项时，需确保openeds数组内无重复值。
扫一扫
6379
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
