[UE4]Menu Anchor,菜单锚点

一、想要弹出某个菜单的时候,Menu Anchor可以做为菜单弹出的位置。

二、Menu Anchor本身不显示任何东西

  

三、Menu Class:选择要弹出的UI,可以是任意的UserWidget

  

四、Menu Anchor.Open:显示关联的UI,Menu Anchor.Close:关闭关联的UI

  

  

 

  

 

转载于:https://www.cnblogs.com/timy/p/10325705.html

### 实现 `el-anchor` 双层嵌套跟随滚动的效果 要实现 `el-anchor` 的双层嵌套跟随滚动效果,可以基于 Vue 和 Element-UI 提供的功能扩展自定义逻辑。以下是详细的解决方案: #### 1. 基本原理 通过监听页面的滚动事件,动态计算当前视口中的活动,并更新到对应的菜单项中。对于双层嵌套的情况,需要分别处理外层和内层的。 #### 2. HTML 结构设计 构建一个包含两层结构的布局,其中外层为大模块,内层为细分的小节。 ```html <template> <div class="anchor-container"> <!-- 导航栏 --> <el-menu :default-active="activeOuterLink" @select="handleOuterSelect"> <el-submenu v-for="(item, index) in outerLinks" :key="index" :index="String(index)"> <template slot="title">{{ item.title }}</template> <el-menu-item-group> <el-menu-item v-for="(subItem, subIndex) in item.subItems" :key="`${index}-${subIndex}`" :index="`${index}-${subIndex}`" > {{ subItem }} </el-menu-item> </el-menu-item-group> </el-submenu> </el-menu> <!-- 内容区域 --> <div ref="contentContainer" class="content-area"> <el-anchor :offset="50" @change="onAnchorChange"> <el-link v-for="(outerItem, outerIndex) in outerLinks" :key="'link-' + outerIndex" :href="'#' + outerItem.id" > <h2 :id="outerItem.id">{{ outerItem.title }}</h2> <p>这是{{ outerItem.title}}的内容</p> <el-anchor :offset="50"> <el-link v-for="(innerItem, innerIndex) in outerItem.innerContent" :key="'inner-' + outerIndex + '-' + innerIndex" :href="'#' + innerItem.id" > <h3 :id="innerItem.id">{{ innerItem.text }}</h3> <p>{{ innerItem.description }}</p> </el-link> </el-anchor> </el-link> </el-anchor> </div> </div> </template> ``` --- #### 3. JavaScript 实现逻辑 在 Vue 组件中编写相应的脚本来支持双层的自动高亮功能。 ```javascript <script> export default { data() { return { activeOuterLink: "", // 当前激活的外层链接索引 activeInnerLink: "", // 当前激活的内层链接索引 outerLinks: [ { title: "部分A", id: "part-a", subItems: ["章节A1", "章节A2"], innerContent: [ { text: "小节A1-1", description: "描述...", id: "section-a1-1" }, { text: "小节A1-2", description: "更多细节...", id: "section-a1-2" } ] }, { title: "部分B", id: "part-b", subItems: ["章节B1", "章节B2"], innerContent: [ { text: "小节B1-1", description: "另一个例子...", id: "section-b1-1" }, { text: "小节B1-2", description: "继续深入...", id: "section-b1-2" } ] } ] }; }, mounted() { window.addEventListener("scroll", this.handleScroll); }, beforeDestroy() { window.removeEventListener("scroll", this.handleScroll); }, methods: { handleOuterSelect(key) { const [outerKey] = key.split("-"); // 解析选中外层还是内层 this.activeOuterLink = outerKey; }, onAnchorChange(activeLinkId) { // 更新当前激活的状态 this.outerLinks.forEach((item, index) => { if (item.id === activeLinkId) { this.activeOuterLink = String(index); } else { item.innerContent.forEach(innerItem => { if (innerItem.id === activeLinkId) { this.activeOuterLink = String(index); // 同步外层状态 this.activeInnerLink = `${index}-${innerItem.id}`; } }); } }); }, handleScroll() { const elements = Array.from( document.querySelectorAll(".content-area h2, .content-area h3") ); const scrollPosition = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; let currentActiveId = null; elements.some(el => { if ( el.offsetTop - 50 <= scrollPosition && el.offsetTop + el.offsetHeight > scrollPosition ) { currentActiveId = el.id; return true; // 找到了匹配的元素 } return false; }); if (currentActiveId !== this.activeOuterLink && currentActiveId !== this.activeInnerLink) { this.onAnchorChange(currentActiveId); } } } }; </script> ``` --- #### 4. CSS 样式调整 为了提升用户体验,可以通过平滑滚动动画增强交互感。 ```css <style scoped> .anchor-container { display: flex; } .content-area { margin-left: 20px; padding-top: 50px; } h2, h3 { cursor: pointer; } </style> ``` --- ### 总结 以上代码实现了双层嵌套的跟随滚动效果[^1][^2]。核心在于利用 `window.scrollY` 或者 `document.documentElement.scrollTop` 动态判断哪个处于可见范围内,并同步更新导航菜单的选择状态。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值