当前位置: 首页 > 网络应用技术

如何使El-Menu实现水平溢出和拦截

时间:2023-03-08 23:10:53 网络应用技术

  ANTD的菜单组件将在超过子菜单上截获超过的子菜单。但是元素的菜单组件不会截获溢出

  因此,我想封装元素菜单,以便它可以支持宽度溢出。

  在检查了ANTD的源代码后,它仍然更加复杂。他将复制每个子菜单,然后隐藏在相应的子菜单后面,然后依靠监视菜单和子菜单,然后计算下面的sub -subscriber。仍然有很多代码,当我看到它时,它有点困惑。

  后来我想到了一些想法,需求如下如下

  首先确定模板部分仅需要将传递参数传输到el-menu,然后通过默认插槽的形式接收传输子元素。本文,呈现了溢出零件的显示开关。

  子菜单组件的主要作用是渲染通过列表。列表实际上是从$ slots.default获得的vnode列表的列表。

  在JS部分中,主要判断子菜单的宽度。通过保存所有子菜单的宽度,然后获取容器UL的宽度。确定是否通过增加方式溢出,然后记录。您需要注意的是要记住要添加的内容。

  然后有一些CSS样式处理

  在这里,我们只是处理模型,并且模式仍然兼容,因此您只需要像使用它一样使用它。

  原始:https://juejin.cn/post/71037845823070559