基于Ant Design实现可左右滑动导航菜单

在开发某个商城首页时，需要一个左右可滑动的导航菜单，就像这样：

这个项目采用了AntDesignVue作为组件库，所以就想着使用它的menu组件来实现。但是发现，当菜单项的总宽度超过父元素宽度时，它会自动隐藏超出的菜单项：

显然这是不符合我们的需求的，不能直接使用。所以接下来介绍如何基于Antd Menu组件实现一个可左右滑动的导航菜单。

首先，让原生的Menu组件不隐藏超出的菜单项。但是菜单列表是后台返回的，个数不确定，所以我们也不能给定一个宽度确保足够展示所有的菜单项。我的做法是将ant-menu设置为绝对定位，使其脱离文档流。这样没有了父容器宽度的限制，就不会自动隐藏超出父容器的菜单了。

  <div class="menu-wrapper">
    <a-menu v-model="current" mode="horizontal">
      <a-menu-item key="1">
        <a-icon type="mail" />Navigation One
      </a-menu-item>
      <a-menu-item key="2"> Navigation Two </a-menu-item>
      <a-menu-item key="3">
        <a-icon type="mail" />Navigation Three
      </a-menu-item>
      <a-menu-item key="4"> Navigation Four </a-menu-item>
      <a-menu-item key="5"> Navigation Five </a-menu-item>
      <a-menu-item key="6"> Navigation Six </a-menu-item>
      <a-menu-item key="7"> Navigation seven </a-menu-item>
    </a-menu>
  </div>

父容器设置为相对定位且overflow:hidden。ant-menu设置为绝对定位,脱离文档流，这样菜单的宽度是由自身内容决定的，需要多宽就有多宽，不会出现自动隐藏。

.menu-wrapper {
  position: relative;
  margin: 0 auto;
  width: 800px;
  height: 100px;
  overflow: hidden;
}
.ant-menu {
  margin: 20px 0;
  position: absolute;
  left: 20px;
  top: 0;
}

效果如下：

那么接下来，就是实现左右按钮滑动菜单。这个功能比较简单，就是根据点击事件修改menu的left值。 有个细节就是，left的值最大值是0，最小值是父容器的宽度和menu宽度之差。但是如果菜单项是通过接口请求来的，所以一开始其宽度是0.需要在接口获取数据后，并在nextTick函数中才能获取实际的宽度。

最终效果：

以上就是本文的全部内容，水平有限，欢迎指教。