小编给大家分享一下如何使用Vue实现一个酷炫的菜单插件,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
<强>正文
1。效果演示
pic_1
pic2
pic_3
在线演示现场演示
2。使用介绍
项目地址:github.com/MingSeng-W/vue-bloom-menu,克隆项目到本地
。首先在单文件组件里引入菜单组件、导入常见的文件夹笔里的menuConfig.stylus。
b。配置相应的参数
可选参数
*半径:默认为100 px,项目距离菜单的按钮的距离。
* startAngle: defaut为0,项目开始的角度,以时钟3点钟方向记为0,然后顺时针方向为递增方向。
* endAngle:默认为315年,最后一个条目的角度。
* itemNum:默认为8
* animationDuration:默认为0.5 s,每个项动画的执行时间
* itemAnimationDelay:默认为0.04 s,每个项之间动画触发的间隔延迟时间
必选参数
* iconImgArr
导入您需要的图标,然后生成iconImgArr(计算属性绑定),作为道具传给菜单组件
菜单的位置
目前有中心,角落里两种位置,在菜单的类里指定.center的类:.menu-center-wrapper
角落的类:。menu-left-corner-wrapper。当然自己指定位置也是ok的。
一个简单的示例
位置解释
位置的计算:首先计算每个项之间的夹角,起始项目是沿着顺时针布局的,每个项之间的夹角等于(endAngle-startAngle)/(itemNum-1)。当前项目应该旋转的角度为:angleCur=startAngle +指数*每个项之间的夹角。得到项目的旋转角度之后,用Math.cos和sin和半径相乘得到其横坐标和纵坐标。
关键代码:
计算每个条目的夹角
位置解释
<强>第二步,根据生成的坐标使用js动态生成animtion,并插入到样式文件中。
生成展开和收缩的关键帧
到这一步我们完成了点击菜单展开与收缩。
<强>第二步,完成点击项目之后物品放大与消失,其他的项缩小与消失
项消失的关键帧
项消失的关键帧
这里触发动画使用Vue提供过渡,当元素的v-show为假时,也就是显示为没有时,触发动画。
每个项动画完成后都会触发animationEnd事件,监听项的animationEnd事件,当所有动画依次触发完毕之后,提醒菜单置于关闭状态(父子组件通信)。
我在菜单组件里使用v监听animationEnd事件,项目自己的动画执行后,通过释放美元触发animationEnd事件,通知菜单的动画计数计数+ +,当数达到总的项目数的时候,菜单进行关闭。
