摘要：你是否臨下班前接到開發(fā)一個(gè)組件的需求是否業(yè)務(wù)量巨大到加班還搞不定的情況下可惡的產(chǎn)品經(jīng)理卻還要求明天前開發(fā)一個(gè)高度自定義的組件然后又對(duì)現(xiàn)有的組件不滿意又或者滿意的組件使用的框架與現(xiàn)有業(yè)務(wù)不符那么如果你是開發(fā)者且有組件的需求，可以瞅瞅這個(gè)組件完

你是否臨下班前接到開發(fā)一個(gè)FAB組件的需求？ 是否業(yè)務(wù)量巨大到加班還搞不定的情況下可惡的產(chǎn)品經(jīng)理卻還要求明天前開發(fā)一個(gè)高度自定義的FAB組件然后又對(duì)現(xiàn)有的組件不滿意？ 又或者滿意的組件使用的框架與現(xiàn)有業(yè)務(wù)不符？ 那么 如果你是Vue開發(fā)者且有FAB組件的需求，可以瞅瞅這個(gè)組件！  
完美支持阿里巴巴ICONFONT 以及 Material Icons 無需擔(dān)憂額外依賴
項(xiàng)目地址 https://github.com/a62527776a...

vue-float-action-button是一個(gè)美觀、動(dòng)畫流暢、自定義內(nèi)容豐富的一個(gè)Vue FAB組件

具有以下常用功能：

icon大小分為 big(48px) small(32px) normal(40px) 子icon的大小為主icon的80%

icon支持 Material Icons 以及 阿里巴巴ICONFONT 兩種圖標(biāo) 根據(jù)readme.md操作 即可使用 Material Icons 或者iconfont

子菜單項(xiàng)的切換支持兩種動(dòng)畫模式 自由選擇喜歡的動(dòng)畫模式

兩者的動(dòng)畫模式是獨(dú)立的，您大可分別設(shè)置不同的動(dòng)畫組合

如果您對(duì)動(dòng)畫曲線有特殊要求，可以使用貝塞爾曲線工具自定義您喜歡的貝塞爾曲線

與自定義動(dòng)畫模式一樣 自定義動(dòng)畫曲線同樣是獨(dú)立的， 您大可多帶帶設(shè)置動(dòng)畫曲線

如果希望用戶在上劃或者網(wǎng)頁向上滾動(dòng)時(shí)的時(shí)候讓FAB消失并且反過來顯示，那么vue-float-action-button能滿足你

為了更好的使用體驗(yàn)，在PC端和移動(dòng)端的實(shí)現(xiàn)上有所不用 分別采用監(jiān)聽頁面滾動(dòng)(PC)和手指滑動(dòng)(Mobile) 以達(dá)到優(yōu)秀的用戶體驗(yàn)

除以上之外 vue-float-action-button 還可以自定義

每個(gè)菜單項(xiàng)出現(xiàn)的延遲時(shí)間

手勢/滾動(dòng)自動(dòng)隱藏的閾值

子菜單標(biāo)題 樣式

等 方便開發(fā)的各項(xiàng)API

vue-float-action-button 使用Vue開發(fā) 開發(fā)環(huán)境為Webpack、ESLint
git項(xiàng)目地址 https://github.com/a62527776a/vue-floating-action-button
在線預(yù)覽地址為http://htmlpreview.github.io/...://github.com/a62527776a/vue-floating-action-button/blob/master/demo/dist/index.html
歡迎大家試用、提供批評(píng)、意見以及PR Issue Star