乐趣区

关于前端:记一个奇葩需求的实现

jiezi

1、前言

咱们这边没有专门的产品经理，UI对产品的设计根本具备决定权，说实话，是有那么一点可怖的（前后改了很屡次，差一点就改回原版了，我本人都感觉不好意思了🤣）。

🤔有没有一种可能：咱们 UI 体验过的产品少，短少对产品以及用户行为的意识。设计进去的货色看似很富丽，其实缺失很多场景下的剖析，不切合实际，这也正是产品经理须要做的工作之一。大多数人说的“用户体验”或者只是主观的、想当然的（俺也一样😮）。

自从接触互联网开始我就在无意的学习怎么做产品，期间还思考过转产品，永远不要拿业余的跟业余的比，没什么可比性，不成熟。持续放弃思考、学习。

上面记录一下我感觉比拟有意思的、会引起思考的需要，所用技术：vue、vue-router、element-ui。

2、需要：

导航菜单（el-menu组件）竖向展现的

  1. 鼠标移入一级菜单展现上面的子菜单，移出则收起来（手风琴模式，失常状态下只放弃一个菜单处于开展状态，手动鼠标悬浮开展的不算）
  2. 选中某个子菜单时高亮对应的一级菜单，并且当鼠标移出高亮的这个菜单模块时不折叠，然而能够点击一级菜单进行折叠（留神：跟第一条有区别）

3、问题：

  1. element-ui的导航组件子菜单关上的触发形式能够通过 menu-trigger 参数管制，然而，只在菜单是程度展现（horizontal）的状况下失效。嘶~！ 我不禁暗想🤔：垂直模式滑动开展真的会有零碎这么做吗？（只能本人批改了）
  2. unique-opened 参数能够管制是否只放弃一个子菜单开展，然而在没有子菜单的状况下生效（须要手动批改）

4、思路剖析：

导航菜单应用递归 el-submenu 组件实现

  1. 鼠标滑动开展敞开需要：
  • el-submenu 组件编写鼠标移入移出事件（mouseenter、mouseleave），拿到 indexPath，调用open 和close办法关上或者折叠菜单（留神：没有子菜单的一级菜单鼠标移入移出不做解决）
  1. 只放弃一个菜单处于开展状态
  • 先配置 unique-opened 参数为 false，以保障 openedMenus 只有一个（openedMenus 是 el-menu 外部保护的属性, 能够自行打印看一下）

一开始我想在子菜单开展折叠的回调事件（open、close）里写逻辑判断，然而不晓得什么起因回调事件不触发（留神：open 办法 和open 事件 不一样，组件三大因素：属性、事件、办法 ），所以我就思考在select 回调事件里写逻辑了

  • 在菜单激活的 select 回调事件中，让上一个关上的菜单调用 close 办法敞开。（这里须要记录上次关上菜单的 index，这里我应用sessionStorage 记录）

5、代码展现：

只展现代码片段，仅供参考

sessionStorage应用本人封装的，之前文章有写过，感兴趣的能够看一下

  • el-submenu 组件
menuEnter() {
  // isNest 是否还有子菜单 true: 没有子菜单 false: 有子菜单
  if (!this.isNest && this.item.alwaysShow) {
    // basePath: 一级菜单
    this.$emit('handleOpen', this.basePath)
  }
}

menuLeave() {
  // 存在子菜单，并且不是关上状态的菜单，鼠标来到的时候须要合起来
  if (!this.isNest && !this.curMenuIsOpened) {
    // basePath: 一级菜单
    this.$emit('handleClose', this.basePath)
  }
}
  • el-menu 组件
// 登录零碎的时候，记录开展的菜单信息，// 在 mounted 外面获取 openedMenus，并记录信息
mounted() {
  // 获取以后开展的菜单 - array
  // 手风琴模式，只有一个开展菜单
  
  // openedMenus 是外部属性
  const {openedMenus = []} = this.$refs.menuRef;
  
  if (openedMenus && openedMenus.length > 0) {
    // 获取开展菜单的 index
    const index = openedMenus[0];
    sessionStorage.put('preActiveMenu', index)
  }
}

methods: {handleOpen(indexPath) {
    // 调用 open 办法, 关上 close,
      this.$refs.menuRef.open(indexPath);
  }

  handleClose(indexPath) {
    // 调用 close 办法, 敞开 close
      this.$refs.menuRef.close(indexPath);
  }

  handlerSelect(index, indexPath) {
    // 1. 获取上次激活的菜单信息
    const _preActiveMenu = sessionStorage.get('preActiveMenu') || '';
    if (_preActiveMenu) {
      // 如果存在，则敞开该菜单，再关上新的
      this.$refs.menuRef.close(_preActiveMenu);
    }

    // 2. 记录这次激活的菜单信息
    if (indexPath.length > 0) {sessionStorage.put('preActiveMenu', indexPath[0])
    }
  }
}

6、最终成果展现：

总结

用了 UI 框架之后就不可避免的会跟产品设计格调向左，这就须要在框架根底之上进行批改。框架也是一个个组件组成的，抓住组件设计的三要素：属性、事件、办法，理解框架组件的工作原理，就能够轻松的进行批改啦🎉🎉

我是 甜点 cc

酷爱前端，也喜爱专研各种跟本职工作关系不大的技术，技术、产品趣味宽泛且浓重，期待着一个守业机会。次要致力于分享实用技术干货，心愿能够给一小部分人一些渺小帮忙。

我排挤“新人迷茫，老人看戏”的景象，心愿能和大家一起致力破局。营造一个良好的技术气氛，为了集体、为了我国的数字化转型、互联网物联网技术、数字经济倒退做一点点奉献。数风流人物还看中国、看今朝、看你我。

本文由 mdnice 多平台公布

退出移动版