本文作者:qiaoqingyi

Vue的导航栏显示或隐藏(vue项目nav导航栏的实现)

qiaoqingyi 2023-05-24 479

1需要获取左侧导航栏对象2绑定事件 3css中的显示隐藏有31displayblock显示 32display隐藏 33opacity1显示 34opacity0隐藏,但元素不会彻底消失只是透明度为0,还是会占据空间。

需求 实现一个弧形的菜单栏,并将激活的菜单项移动到中间位置,点击按钮可对该菜单栏进行显示隐藏按照圆环弧度计算每个菜单项应该分布的位置并进行设置,在点击菜单项时更新菜单的起始角度,重新进行分布忘了。

而底部导航栏是直接在Appvue根组件中使用的,登陆页也是通过路由显示在根组件上的,所以登录页没法传值直接控制底部导航栏的显示那么我能通过什么解决了,想到了用vuex状态管理,开工我这边把mutations,actions,getters。

vshow 隐藏 是display#39#39 vif 隐藏是 visibilityhiddendisplay和visibilityhidden的区别是1display是彻底消失,不在文档流中占位,浏览器也不会解析该元素visibilityhidden是视觉上消失了,可。

Vue的导航栏显示或隐藏(vue项目nav导航栏的实现)

阅读
分享