ElementUI顶部菜单响应式实现

解决系统首页响应式布局

目前前端的UI框架使用的时Element-UI，布局提前使用了类似于Bootstrap框架的网格布局，不过Bootstrap中的的最大网格数时12，而Element-UI的时24格，并且也参照了Bootstrap的响应式设计，预设了五个响应尺寸：xs、sm、md、lg 和 xl。这样就可以解决不同屏幕的适配问题了。具体的使用和特性大家可以访问Element-UI的官网中的Layout布局这一介绍。

顶部菜单栏响应式设计

虽然在布局上可以采用上面提到的布局来实现响应式，但是顶部菜单栏它不想Bootstrap那样支持预设好的响应式样式和设计，所以这里需要我们自己实现一下。我的实现方式是通过监控屏幕的长宽比来动态的对顶部菜单进行显示。先看一下最终的效果图
这是PC大屏的显示

手机端的显示

可以看到在PC端的菜单时展示所有，当在手机端的屏幕上将其余的选项放到更多里进行下拉显示，当然大家可以根据自己的需求和设计进行自定义的显示。

实现过程

整体实现过程时通过监听屏幕的长宽比来判断时手机端还是PC端，需要注意的时在ElementUI中window.resize()这种方式是有问题的会报没有resize()这个方法 参考网上的资料后发现可能是是与element-ui里的drawer冲突，drawer也使用了window.onresize，__这里使用window.addEventListener来代替__同样能实现一样的效果。
首先在data的return中定义一个Boolean值，命名为isMobile，如果为true则表示为手机端反之为PC端，默认我们给它false，然后在methods中定义了来个方法，分别如下：

getScreen() {
      let screenWidth = document.body.clientWidth;	//获取屏幕的宽
      let screenHeight = document.body.clientHeight;	//获取屏幕的高
      return screenWidth / screenHeight;	//返回宽除以高
    },
listenScreen() {
   let initScale = this.getScreen();	//初始化判断
   if (initScale < 1) {	//如果小于1说明宽度小于高度，则识别为手机反之为PC
     this.isMobile = true;
   }
   window.addEventListener("resize", () => {	//添加屏幕变化监听，判断逻辑与上方相同
     this.isMobile = this.getScreen() < 1 ? true : false;
   });
 },

然后在mounted方法中调用listenScreen()方法就可以实现了。