本文已参与「新人创作礼」活动，一起开启掘金创作之路。
- 如果与斗鱼直播的效果完全相同，也即需要在侧边栏隐藏时有Icon显示，建议直接使用element-plus的menu组件的垂直布局方式。
- 我的实现目标是不显示Icon，也不使用element-plus，而是自己实现侧边栏的显示与隐藏效果。具体看下图。
- 除了实现了左侧的侧边栏效果，也实现了右侧的侧边栏效果。两者代码上会有一定区分，在文末会简单补充。
斗鱼效果
- 隐藏状态
- 展开状态。
实现效果
- 隐藏状态。
- 展开状态。
实现思路
- 查阅了一些资料，很多都是使用路由相关的功能。
- 但是我觉得太麻烦了，没必要搞得太复杂。
- 所以我选择直接用css动画实现了效果。
左侧侧边栏实现方式
- 直接用轮子：下载animate.js 官方文档：animate.style/#documentat…
npm install animate.css --save
-
给侧边栏的那个按钮绑定方法。通过Vue的Class与Style绑定实现css（动画）的切换。（详见Vue3官方文档）方法是绑定在子组件中的，用emit传递给父组件。
-
因为animate.js动画默认划出消失，所以做一点自定义改动，让他一直存在。
-
因为划出会100%距离划出，但我们希望按钮以及侧边栏的一小部分仍在屏幕内，所以对样式做一些自定义。
右侧侧边栏要注意的地方
- 在AppMain.vue中需要特别修改
补充说明文件结构
- 组件中对通用布局进行设置。
- 最高级为AppMain.vue组件。
- AppMain中包含header，左侧边栏，右侧边栏，以及main。main就是router-view，所有路由仅控制main部分的显示内容。
- 在AppMain中对各个子组件的大小样式进行布局。
- 在侧边栏组件中，让宽度大于100%即可实现隐藏式保留一部分在页面内。
- 在侧边栏组件中，用按钮的方法来控制其动画，即可实现侧边栏隐藏与现实的效果。
补充说明animate.js源码
在node_mudules中找到动画的源码，可以发现其实很基础简单。
后续学习
对于路由实现的侧边栏方法，以及element-plus中的垂直menu组件实现方法我也还是蛮有兴趣的，后续有时间可以再了解一下。 现在这种实现方法属于简单朴实纯手工吧hhh。后续学习了再可以分析一下其设计的思路，应该会再写一篇博客。
参考内容
- Vue官方文档“Class 与 Style 绑定”部分：v3.cn.vuejs.org/guide/class…
- Animate.js官方文档：animate.style/#documentat…
