elementui 顶部导航菜单-ElementUI底部菜单响应式实现

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

目前后端UI框架采用Element-UI，布局采用类似Bootstrap框架的网格布局。 不过，Bootstrap 中的最大网格数为 12 个，而 Element-UI 的最大网格数为 24 个，这也指 Bootstrap 的响应式设计自带了五种预设的响应规范：xs、sm、md、lg 和 xl。 这样可以解决不同屏幕的适配问题。 具体用途和特点可以查看Layout的介绍。

顶部菜单栏响应式设计

虽然上面提到的布局可以实现响应式，但是底部菜单栏不支持像Bootstrap那样预设的响应式样式和设计，所以需要我们自己实现。 我的实现方法是通过监控屏幕的长宽比来动态显示底部菜单。我们先看一下最终的效果图

这是PC大屏幕的显示

在手机上显示

可以看到，在PC端的菜单显示时，所有内容都显示出来，而在手机屏幕上时，剩余的选项则放在More中进行下拉显示。 当然，您可以根据自己的需求和设计定制显示。

实施流程

整体实现过程中elementui 顶部导航菜单，通过监听屏幕的长宽比来判断是在手机上还是在PC上。 需要注意的是ElementUI中的window.resize()方法有问题，会报没有resize()方法。 请参考互联网。 看了资料，发现可能和element-ui中的drawer有冲突。 抽屉也使用window.onresize。 这里，使用window.addEventListener代替__也可以达到同样的效果。

首先，在返回数据中定义一个布尔值elementui 顶部导航菜单，命名为isMobile。 如果为真，则表示手机端，反之亦然。 默认情况下我们给它false，然后在methods中定义一个方法，如下：

getScreen() {
      let screenWidth = document.body.clientWidth;	//获取屏幕的宽
      let screenHeight = document.body.clientHeight;	//获取屏幕的高
      return screenWidth / screenHeight;	//返回宽除以高
    },
listenScreen() {
   let initScale = this.getScreen();	//初始化判断
   if (initScale  {	//添加屏幕变化监听，判断逻辑与上方相同
     this.isMobile = this.getScreen() < 1 ? true : false;
   });
 },

然后在挂载模式下调用listenScreen()方法来实现这一点。