简单模拟el-menu实现TestTree.vueMenu.vueSubMenu.vue

学习链接

需要注意这个dom结构过渡动画一定要有开始和结束值才能产生动画并且在js里面修改的时候不能连着修改要把第二次修改放到setTimeout里面为了让菜单能够不是一次性过渡让它可以一直产生过渡动画需要在动画结束后清理掉设置的高度这个设置的高度只需要在动画的时候生效。

以上的操作参考了elementui的el-menu

iview里面的menu使用下面这种原生的方式实现之后再对比vue的transition组件的的钩子函数感觉好类似阿可参考vue项目中实现折叠面板动画效果就是不知道我这样用setTimeout到底属不属于正常操作。

不过感觉理解了下面这个之后再去看vue的transition过渡钩子好像就比较容易理解了

style

url(//at.alicdn.com/t/c/font_4065865_kb7oyb2wje9.css);

ul,

space-between;:hover{background-color:

{font-size:

clickclickMenu($event)divspan1-1/span/divi

classiconfont

67px;divspan菜单1-1-1/span/div/div/li/ul/lili

classmenu-itemdiv

43px;divspan菜单1-2/span/div/div/li/ul/lili

classmenu-submenu

clickclickMenu($event)divspan目录2/span/divi

classiconfont

43px;divspan菜单2-1/span/div/div/lili

classmenu-itemdiv

43px;divspan菜单2-2/span/div/div/li/ul/lili

classmenu-itemdiv

classmenu-titledivspan菜单4/span/div/div/li/ul/div

/templatescript

console.log(e.target,e.target);

console.log(e.currentTarget,e.currentTarget);

console.log(e.currentTarget.dataset);

console.log(e.currentTarget.nextSibling);

下一个兄弟节点//

那么就需要关闭它if(currentTarget.dataset[expanded]

true)

获取是关闭状态currentTarget.dataset[expanded]

false//

将高度置为空这个很重要动画结束后这个高度一定要清空掉因为这个高度不能写死//

如果写死了万一它里面还有子节点的话子节点一旦展开那这个高度肯定不够//

我们需要的只是在过渡的时候需要它的高度ul.style.height

nullconsole.log(currentTarget.dataset[expanded],123);}//

在动画结束后直接func函数ul.addEventListener(transitionend,

func)},0)}

打开它的话就必须要知道它有多高才能产生动画实现0到指定高度的变化console.log(2);//

三角形打开状态ul.parentNode.classList.add(menu-opened)//

0px//

修改ul的高度必须要写在setTimeout里面不能在setTimeout外面立马改掉setTimeout((){//

ul.scrollHeight

解除事件绑定ul.removeEventListener(transitionend,func)//

记录当前是打开状态currentTarget.dataset[expanded]

true//

将高度置为空这个很重要动画结束后这个高度一定要清空掉因为这个高度不能写死//

如果写死了万一它里面还有子节点的话子节点一旦展开那这个高度肯定不够//

我们需要的只是在过渡的时候需要它的高度ul.style.height

null}//

动画结束后收尾工作ul.addEventListener(transitionend,

func)})}}

生成的结构与上面完全一致所以还是要先把想要的样子先写出来规划好然后再通过vue拆分组件去实现。

获得的效果与上面一致但是写法更加的简单并且使用到了element-ui的CollapseTransition组件需要从el的源码中导入

注意下面在拆分组件的时候的技巧把当前的菜单标题和这个菜单下的子菜单拆成一个组件SubMenu这个组件专门负责生成子菜单

vue是可以支持两个组件之间相互引用的下面的Menu组件和SubMenu组件就是相互引用了

TestTree.vue

url(//at.alicdn.com/t/c/font_4065865_kb7oyb2wje9.css);ul,

{margin:

.menu-opened.menu-titlei.icon-jiantou

{transform:

:class[menu-submenu,{menu-opened:

submenuShow}]div

1/Menu/CollapseTransition/template/li

/templatescript

element-plus/lib/components/collapse-transition/src/collapse-transition;

import

url(//at.alicdn.com/t/c/font_4065865_kb7oyb2wje9.css);

ul,

space-between;:hover{background-color:

{font-size: