一种基于管理平台的页面左菜单自适应展示方法与流程

本发明涉及前端页面开发技术领域，特别是一种基于管理平台的页面左菜单自适应展示方法。

背景技术：

自适应页面布局是前端页面开发的一项重要技术，解决用户在不同分辨率设备上正常操作页面的需求；因此前端开发人员需要考虑在不同的页面宽度下，如何在不影响页面内容获取的前提下，友好地展示页面效果；为使用者带来友好的用户体验。

一个管理平台体系包括很多复杂的内容与模块，需要一个友好的左侧菜单进行内容引导，在移动端亦如此。在移动端正常展示一个导航菜单，繁多的跳转链接将撑开一大块区域，占据屏幕比例，阻碍阅读。常见的实现方法是采用下拉菜单方式；缺点是下拉选择框占据屏幕占比，且存在视觉效果不佳等问题。

技术实现要素：

本发明解决的技术问题在于提供一种基于管理平台的页面左菜单自适应展示方法能在pc端与移动端等不同屏幕分辨率下友好展示管理平台的页面菜单，有效降低导航菜单在屏幕中的占比，提升页面内容的可阅读性及用户体验。

本发明解决上述技术问题的技术方案是：

所述的方法是编写左侧平铺式菜单与抽屉滑出式菜单样式及展示内容并进行组件化；将控制按钮与组件进行关联；通过监测屏幕大小决定触发哪个组件的显示与隐藏。

所述的方法具体包括以下步骤：

s1：分别编写左侧平铺式菜单与抽屉滑出式菜单样式及展示内容；

s2：对菜单进行组件化，封装菜单代码内容，建立两个组件，分别是平铺式菜单组件与滑出式菜单组件；

s3：编写控制按钮关联两个菜单组件，绑定一个控制菜单显示或者隐藏的参数对象，通过点击事件控制菜单是否显示的状态，一个按钮同时控制两种菜单模式；

s4：创建监测函数进行屏幕大小监测，并在菜单组件上绑定监测判断条件，如果屏幕宽度小于等于768px，则在触发控制按钮时操控抽屉滑出式菜单的显示与隐藏；若屏幕宽度大于768px时，则在触发控制按钮时操控平铺式菜单的显示与隐藏。

所述的平铺式菜单是指与普通菜单一致的左侧导航菜单栏，在pc端管理后台平铺于左侧进行展示，起到导航指引作用；

所述的抽屉滑出式菜单是指通过一个触发按钮，从左侧滑出一个菜单栏，再点击菜单外任一位置进行菜单往左收缩隐藏的菜单展示模式。

所述的菜单进行组件化分别将左侧平铺式菜单与抽屉滑出式菜单代码封装成两个独立的组件，包括各自独立的事件和元素，组件化后在子组件引入使用，向子组件传递数据。

所述的控制按钮关联通过mvvm(model-view-viewmodel)模式的双向数据绑定，使用一个数据参数作为监听对象，完成与动作之间的绑定。

所述的监测函数通过在全局判断数据发生变化时，重新对计算属性进行计算，然后将计算结果注入到根组件下的所有子组件中，子组件访问实时改变的数据结果，在页面监听屏幕变化；再将数据结果的判断绑定在两个菜单组件上，从而实现实时监测。

所述的监测判断条件为当前的屏幕宽度是否大于768px，若屏幕宽度小于或等于768px，则在触发控制按钮时操控抽屉滑出式菜单的显示与隐藏，此时不触发平铺式菜单；若屏幕宽度大于768px时，则在触发控制按钮时操控平铺式菜单的显示与隐藏，此时不触发抽屉式滑出菜单。

本发明解决了不同屏幕大小下左菜单体验不友好、占比大、操作不便捷等问题。在移动端屏幕下采用抽屉滑出式菜单，相对于其他移动端管理页面，在浏览主要内容时，提高了可阅读范围的占比，点击菜单链接后菜单滑出视线范围，不再占据屏幕空间。

附图说明

下面结合附图对本发明进一步说明：

图1为本发明方法的流程图；

图2为本发明方法的在pc端下的效果图；

图3为本发明方法的在移动端下显示抽屉滑出式菜单的效果图；

图4为本发明方法的在移动端下隐藏抽屉滑出式菜单的效果图。

具体实施方式

本发明的实施方式有多种，这里以基于vue框架为例说明琪总一种实现方法，流程图如图1所示，具体实施过程如下：

1、编写左侧平铺式菜单与抽屉滑出式菜单样式及展示内容；

2、菜单组件化，封装菜单代码内容，建立两个组件，分别是平铺式菜单组件与滑出式菜单组件,其中sider为平铺式菜单组件，drawer为抽屉滑出式菜单组件：

3、编写控制按钮关联两个菜单组件，绑定一个控制菜单显示或者隐藏的参数对象，通过点击事件控制菜单是否显示的状态，一个按钮同时控制两种菜单模式，其中collapse为参数对象(绑定内容见步骤2)，按钮icon置于topic组件中：

4、创建监测函数进行屏幕大小监测，并在菜单组件上绑定监测判断条件，如果屏幕宽度小于等于768px，则在触发控制按钮时操控抽屉滑出式菜单的显示与隐藏；若屏幕宽度大于768px时，则在触发控制按钮时操控平铺式菜单的显示与隐藏(绑定内容见步骤2)：

采用本发明方法的在pc端下的效果、在移动端下显示抽屉滑出式菜单的效果，以及在移动端下隐藏抽屉滑出式菜单的效果如图2-4所示。

技术特征：

技术总结
本发明涉及前端页面开发技术领域，特别是一种基于管理平台的页面左菜单自适应展示方法。本发明的方法是编写左侧平铺式菜单与抽屉滑出式菜单样式及展示内容并进行组件化；将控制按钮与组件进行关联；通过监测屏幕大小决定触发哪个组件的显示与隐藏。本发明解决了不同屏幕大小下左菜单体验不友好、占比大、操作不便捷等问题；可应用于前端自适应页面布局。

技术研发人员：林海伦;季统凯
受保护的技术使用者：国云科技股份有限公司
技术研发日：2018.11.28
技术公布日：2019.04.26