快捷導(dǎo)航

基于 Vue 實(shí)現(xiàn)一個(gè)酷炫的 menu插件

更新時(shí)間：2017年11月14日 09:36:01 投稿：mrr

本文給大家介紹基于 Vue 實(shí)現(xiàn)一個(gè)酷炫的 menu插件，此篇教程需要大家具備一定的css和vue基礎(chǔ)知識(shí)，本文分步驟給大家介紹的非常詳細(xì)，需要的朋友參考下吧

寫在前面

最近看到一個(gè)非常酷炫的menu插件，一直想把它鼓搗成vue形式，誰(shuí)讓我是vue的死灰粉呢，如果這都不算愛(ài):pensive:。:laughing:開(kāi)個(gè)小玩耍，我們一起來(lái)探索黑魔法吧。觀看本教程的讀者需要具備一定的vue和css3的知識(shí).

本文結(jié)構(gòu)

1.效果演示

2.使用方法介紹

3.關(guān)鍵步驟講解

正文

1.效果演示

pic_1

pic2

pic_3

在線演示 live demo

2.使用介紹

項(xiàng)目地址:github.com/MingSeng-W/vue-bloom-menu ,clone項(xiàng)目到本地

a. 首先在單文件組件里引入menu組件，導(dǎo)入common文件夾stylus里的menuConfig.stylus.

b.配置相應(yīng)的參數(shù)

可選參數(shù)

* radius：default為100px,item距離menu的button的距離。

* startAngle:defaut為0，item開(kāi)始的角度，以時(shí)鐘3點(diǎn)鐘方向記為0，然后順時(shí)針?lè)较驗(yàn)檫f增方向。

* endAngle:default為315，最后一個(gè)item的角度。

* itemNum:default為8

* animationDuration:default為0.5s，每個(gè)item動(dòng)畫的執(zhí)行時(shí)間

* itemAnimationDelay:default為0.04s,每個(gè)item之間animation觸發(fā)的間隔延遲時(shí)間

必選參數(shù)

* iconImgArr

import您需要的icon,然后生成iconImgArr（computed屬性綁定），作為props傳給menu組件

menu的位置

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

corner的class:.menu-left-corner-wrapper。當(dāng)然自己指定位置也是ok的。

一個(gè)簡(jiǎn)單的example

demo

3.關(guān)鍵步驟講解

整個(gè)menu的實(shí)現(xiàn)關(guān)鍵在于計(jì)算menu展開(kāi)后最后的坐標(biāo)，以及展開(kāi)與收縮的動(dòng)畫.（由于整個(gè)項(xiàng)目布局比較簡(jiǎn)單，所以這里主要講解邏輯和動(dòng)畫的實(shí)現(xiàn)）

第一步：計(jì)算menu展開(kāi)后橫坐標(biāo)和縱坐標(biāo)

下面的x,y分別表示item在頁(yè)面的位置,以x為例。

x：原始的位置，x2最后展開(kāi)的位置，x1中間的過(guò)渡位置(主要是造成一個(gè)“拉回”的效果)，以下是圖片解釋,為了解釋簡(jiǎn)單明了，我放大了radius倍數(shù)以及增加了動(dòng)畫的執(zhí)行時(shí)間。

位置解釋

位置的計(jì)算：首先計(jì)算每個(gè)item之間的夾角,起始item是沿著順時(shí)針布局的，每個(gè)item之間的夾角等于(endAngle-startAngle)/(itemNum-1)。當(dāng)前item應(yīng)該旋轉(zhuǎn)的角度為：angleCur=startAngle+index*每個(gè)item之間的夾角。得到item的旋轉(zhuǎn)角度之后，用Math.cos和Math.sin和radius相乘得到其橫坐標(biāo)和縱坐標(biāo).

關(guān)鍵代碼:

計(jì)算每個(gè)item的夾角

位置解釋

第二步，根據(jù)生成的坐標(biāo)使用js動(dòng)態(tài)生成animtion,并插入到樣式文件中。

生成展開(kāi)和收縮的keyframe

到這一步我們完成了點(diǎn)擊menu展開(kāi)與收縮。

第二步，完成點(diǎn)擊item之后item放大與消失，其他的item縮小與消失

item消失的keyframe

這里觸發(fā)動(dòng)畫使用 vue提供transition ，當(dāng)元素的v-show為false時(shí)，也就是display為none時(shí)，觸發(fā)動(dòng)畫。

每個(gè)item動(dòng)畫完成后都會(huì)觸發(fā)animationEnd事件，監(jiān)聽(tīng)item的animationEnd事件，當(dāng)所有動(dòng)畫依次觸發(fā)完畢之后，提醒menu置于關(guān)閉狀態(tài)（父子組件通信）。

我在menu組件里使用v-on監(jiān)聽(tīng)animationEnd事件，item自己的動(dòng)畫執(zhí)行后,通過(guò)$emit觸發(fā)animationEnd事件，通知menu的動(dòng)畫計(jì)數(shù)count++,當(dāng)count達(dá)到總的項(xiàng)目數(shù)的時(shí)候,menu進(jìn)行關(guān)閉.

code

再次打開(kāi)menu的時(shí)候檢查與item綁定的showItem是否為false,是的話置為true。點(diǎn)擊時(shí)需要拿到被點(diǎn)擊item的index,得到全局的currentIndex即被點(diǎn)擊的item的index。被點(diǎn)中的使用放大動(dòng)畫，否則使用縮小動(dòng)畫。