Vue
还是老样子，我们先把模板搭起来,这里需要注意的事我们的菜单列表这里我写了两套，一套适应于pc端，一个适用于mobile。可能有人会说代码冗余了，所以这里我们用 的是v-if和v-else来判断的，当listShow为真时使用pc这段代码，当listShow为假时使用mobile这段代码。这里我侧边菜单用了transition过渡，如果你觉得顶部有需要可以自行添加。
上次写分页的时候发现样式还是挺多的，这里就不全部附上了，把关键的提取过来吧，毕竟样式对于前端来说都是so easy的，这里主要是侧边菜单的过渡效果和自适应的调整，部分写在样式里面了。实现原理在dom中定义了transition过渡，定义一个name属性，设置的过渡样式fade-enter-active和fade-leave-active分别指定了载入和离开时的动作。
功能一：自适应屏幕菜单切换，这就要我们时刻来监听浏览器宽度了，这里我们可以使用window.addEventListener来实现监听，获取document.documentElement.clientWidth或document.body.clientWidth即为屏幕显示的宽度，拿到这个宽度我们做些判断，改变listShow、searchInput、logopPic的属性来实现自动适应屏幕样式。
功能二：搜索功能，当点击搜索图标时，判断input是否显示切有无值，如果有的话就执行搜索操作，这里我们忽略了路由请求操作，需要的自行添加，如果没有值则用来切换input状态，隐藏和现实input框，当屏幕小于450时因为宽度不够，显示时我将logo给隐藏了，隐藏时再次显示logo即可。结合前面的屏幕宽度判断，这时input框就可以很好的自适应了。
功能三：侧边菜单除了可以根据屏幕宽度来自动隐藏显示，当我们还需要可以手动展开/收起菜单，这里我在左上角留了一个图标，用来提醒用户这里是菜单按钮（小屏幕时自动收起了，pad则自动展开），在图标上添加点击事件@click='sideMenu'。
功能四：最主要的菜单点击功能，点击一级菜单时改变样式，如果有二级菜单则显示二级菜单，再次点击则收起子菜单。选择二级菜单时同样改变对应样式，这样用户就可以很清楚的知道自己当前正处于哪个菜单项中了。
子菜单同理， 如果没有二级菜单的那么就需要添加路由跳转来实现页面的切换，如子菜单中的this.$router.push(child.path)即可，这里也是把其他子菜单样式清除，保留当前的菜单样式即可。
到这里基本都功能实现了，下面我们看看菜单列表是什么结构吧，这里我们把当前点击的样式状态写在了列表中，当对应的bigshowclass和showclass为真时样式生效，我们就是通过控制这些属性来实现样式的清除和添加的。
这就是今天分享的内容了，下面是mobile端的效果。有不懂的可以留言，也欢迎指正！