基于vue实现圆形菜单栏组件

前端  /  管理员 发布于 4年前   815

整个样式都是基于css3 得transform而实现得。

每个扇形角度为360/12=30deg，当然，你不想做圆形也可以，公式就是     扇形角度=你想绘制得角度/扇形个数

当你计算好每个扇形得角度时，需要将li元素倾斜，倾斜角度=90-扇形面积，我的这个倾斜角度就是90-30=60deg，然后使用css3 得skew()

 

circle-panel-1

circle-panel-2

circle-panel-3

当每个扇形倾斜60deg之后，会在原来得位置上，要想每个扇形有规律得组合在一起，那么就要旋转相应得角度，30deg,60deg,90deg…….这个以扇形得圆心角递加。

这是基础组件得完整代码，父组件只需导入使用传给子组件数据就可以了，当点击每个扇形得事件也在父组件监听实现相应的逻辑。script部分我加了js代码和ts代码，没有用过ts得小伙伴就忽略直接参考js代码就可以了。并且我调用了手势库hammer.js，这个库很全，大家感兴趣得可以去查一下使用方法，这样这个圆环是可以旋转得。

父组件调用：

总结

以上所述是小编给大家介绍的基于vue实现圆形菜单栏组件,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

您可能感兴趣的文章:

• vue如何实现自定义底部菜单栏
• Vue 菜单栏点击切换单个class(高亮)的方法
• vue2.0使用v-for循环制作多级嵌套菜单栏
• Vue实现侧边菜单栏手风琴效果实例代码
• Vue-路由导航菜单栏的高亮设置方法
• 基于vue.js实现侧边菜单栏