來源：https://github.com/OYsun/VueCircleMenu
作者：OYsun（轉(zhuǎn)載已獲得作者許可诞仓，如需轉(zhuǎn)載請與原作者聯(lián)系）

VueCircleMenu

效果圖

API

Props

Slot

詳細(xì)說明

Props

type

type參數(shù)是必填項欢揖，指明菜單的類型，一共有一下六種:top,botoom,left,right,middle,middle-around

circle

circle是讓菜單按鈕為圓角奋蔚，默認(rèn)是方形按鈕：

mask

mask是開關(guān)按鈕在切換的時候產(chǎn)生的遮罩她混，分為兩種："white"和"black".(注意：不填或填錯類型都視為不需要遮罩)

animate

animate是給菜單添加動畫，只要添加動畫css類即可泊碑，可以引入第三方css動畫庫坤按，比如animate.css

colors

colors是指定按鈕和菜單的背景顏色，不使用該屬性馒过，則會使用默認(rèn)的顏色配置臭脓，該組件默認(rèn)顏色配置為：

如果要配置顏色，colors傳入數(shù)組腹忽，另外来累，很重要的一點,數(shù)組的值必須是顏色代碼，而不是css類窘奏。例如:

<cirecle-menu type="bottom" colors="[ '#563761', '#A7425C', '#FFE26F', 'F3825F', '#F19584', ]">
    <button type="button" slot="item_btn"></button>
    <a slot="item_1" class="fa fa-twitter fa-lg" herf="#" ></a>
    <a slot="item_2" class="fa fa-weixin fa-lg" herf="#" ></a>
    <a slot="item_3" class="fa fa-weibo fa-lg" herf="#" ></a>
    <a slot="item_4" class="fa fa-github fa-lg" herf="#" ></a>
  </cirecle-menu>

注意顏色代碼必須一一對應(yīng)嘹锁，第一個顏色代碼指代按鈕，第二個顏色為第一個菜單着裹，依次類推领猾，共五個顏色代碼，填多骇扇，填少或者填入的不是顏色代碼都是無效的

Slot

item_btn

該命名slot是指自定義開關(guān)按鈕摔竿，當(dāng)你需要自定義開關(guān)按鈕，請不要填寫btn屬性少孝，使用該slot继低，這樣就可以禁用默認(rèn)的開關(guān)按鈕，使用自定義的按鈕稍走。（自定義開關(guān)按鈕有個好處郁季，就是可以給開關(guān)按鈕綁定事件冷溃，做進一步的操作）

item_1,item_2,item_3,item_4

該類slot分別指代四個菜單按鈕

思想：

這五個slot，其實就說明該組件其實就一個包裹內(nèi)容的控件梦裂， 里面的內(nèi)容都在slot設(shè)置。

• 通過solt盖淡，可以填寫任何內(nèi)容年柠，并且自定義樣式

  <cirecle-menu type="top">
    <button type="button" slot="item_btn"></button>
    <router-link :to="..." slot="item_1">
    <span slot="item_2"></a>
    <div slot="item_3"></a>
    ![](img)
  </cirecle-menu>

• 通過slot，給菜單綁定事件

  <cirecle-menu type="middle-around">
    <button type="button" slot="item_btn" @click="dosomething" ></button>
    <a slot="item_1" herf="#" @click=""></a>
    <v-touch tag="a" v-on:tap="onTap" slot="item_2"></v-touch>
    <v-touch tag="a" v-on:tap="onTap" slot="item_3"></v-touch>
    <a slot="item_4" herf="#" v-on:handler="handler"></a>
  </cirecle-menu>

簡單的例子

<!--"middle"類型, 動畫引入animate.css庫褪迟，白色遮罩冗恨，圓形自定義開關(guān)按鈕，默認(rèn)菜單顏色配置-->
  <cirecle-menu type="middle" animate="animated jello" mask='white' circle>
    <button type="button" slot="item_btn"></button>
    <a slot="item_1" class="fa fa-twitter fa-lg"></a>
    <a slot="item_2" class="fa fa-weixin fa-lg"></a>
    <a slot="item_3" class="fa fa-weibo fa-lg"></a>
    <a slot="item_4" class="fa fa-github fa-lg"></a>
  </cirecle-menu>

<!--"top"類型,默認(rèn)動畫,灰色遮罩味赃，方形默認(rèn)開關(guān)按鈕掀抹，自定義菜單顏色配置-->
  <cirecle-menu type="top" mask='black' btn colors="[ '#563761', '#A7425C', '#FFE26F', 'F3825F', '#F19584', ]">
    <a slot="item_1" class="fa fa-twitter fa-lg"></a>
    <a slot="item_2" class="fa fa-weixin fa-lg"></a>
    <a slot="item_3" class="fa fa-weibo fa-lg"></a>
    <a slot="item_4" class="fa fa-github fa-lg"></a>
  </cirecle-menu>

安裝和使用

npm install vue-circle-menu

• 若作為全局組件使用

//在項目入口文件
import Vue from 'vue'
import CircleMenu from 'vue-circle-menu'
Vue.component('CircleMenu', CircleMenu)

• 若作為局部組件

//在某個組件中
import CircleMenu from 'vue-circle-menu'
export default {
  components: {
    CircleMenu
  }
}

bug和建議

如果在使用中遇到問題或者建議，歡迎提issues