Vue 撸一个半环形菜单

需求描述:

实现一个环形菜单、一半隐藏、一半滚动展示，有点像摩天轮，每一个小环球代表一个菜单，被选中的菜单处于激活状态，并在屏幕上显示此菜单对应的功能说明。

实现效果

实现思路

计算一个方框区域，以此方框边长一半作为半径画个圆，并按照菜单个数均分菜单将菜单分不到圆环上面话小球，用css控制其激活、hover状态，监听小球点击事件，并更新左边的菜单说明。

代码实现

组件代码 CircleMenue.vue

组件调用

完毕！