用vue做一个酷炫的menu - MingSeng-W的个人空间 - OSCHINA - 中文开源技术交流社区

最近看到一个非常酷炫的 menu 插件，一直想把它鼓捣成 vue 形式，谁让我是 vue 的死灰粉呢，如果这都不算爱😔。😆开个小玩耍，我们一起来探索黑魔法吧。观看本教程的读者需要具备一定的 vue 和 css3 的知识.

1. 效果演示

2. 使用方法介绍

3. 关键步骤讲解

1. 效果演示

1240

pic_1

1240

pic_3

在线演示 live demo

2. 使用介绍

项目地址:github.com/MingSeng-W/vue-bloom-menu,clone 项目到本地

a. 首先在单文件组件里引入 menu 组件，导入 common 文件夹 stylus 里的 menuConfig.stylus.

b. 配置相应的参数

可选参数

* radius：default 为 100px,item 距离 menu 的 button 的距离。

* startAngle:defaut 为 0，item 开始的角度，以时钟 3 点钟方向记为 0，然后顺时针方向为递增方向。

* endAngle:default 为 315，最后一个 item 的角度。

* itemNum:default 为 8

* animationDuration:default 为 0.5s，每个 item 动画的执行时间

* itemAnimationDelay:default 为 0.04s, 每个 item 之间 animation 触发的间隔延迟时间

必选参数

* iconImgArr

import 您需要的 icon, 然后生成 iconImgArr（computed 属性绑定），作为 props 传给 menu 组件

menu 的位置

目前有 center,corner 两种位置，在 menu 的 class 里指定。center 的 class:.menu-center-wrapper

corner 的 class:.menu-left-corner-wrapper。当然自己指定位置也是 ok 的。

一个简单的 example

1240

3. 关键步骤讲解

整个 menu 的实现关键在于计算 menu 展开后最后的坐标，以及展开与收缩的动画.（由于整个项目布局比较简单，所以这里主要讲解逻辑和动画的实现）

第一步：计算 menu 展开后横坐标和纵坐标

下面的 x,y 分别表示 item 在页面的位置，以 x 为例。

x：原始的位置，x2 最后展开的位置，x1 中间的过渡位置 (主要是造成一个 “拉回” 的效果)，以下是图片解释，为了解释简单明了，我放大了 radius 倍数以及增加了动画的执行时间。

1240

位置的计算：首先计算每个 item 之间的夹角，起始 item 是沿着顺时针布局的，每个 item 之间的夹角等于 (endAngle-startAngle)/(itemNum-1)。当前 item 应该旋转的角度为：angleCur=startAngle+index * 每个 item 之间的夹角。得到 item 的旋转角度之后，用 Math.cos 和 Math.sin 和 radius 相乘得到其横坐标和纵坐标.

关键代码:

1240