Vue3导航栏组件封装实现方法

在Vue3中封装一个导航栏组件,并且实现,随着滚动条滚动实现一个吸顶效果,供大家参考

导航栏组件的效果图:

Vue3导航栏组件封装实现方法_第1张图片

滚动条滚动以后的吸顶效果示意图:

具体代码展示:


 

 

中间菜单部门单独封装一个组件,实现两个组件的复用  (HeaderNavCommon组件)


 

 

封装吸顶效果的组件


 

 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

你可能感兴趣的