Vue開源：VueCircleMenu - 美炸天的圓環菜單組件

API

Props

參數	類型	說明
type	String	必填項,指明菜單的類型,有6種：top,botoom,left,right,middle,middle-around
circle	boolean	菜單按鈕是否為圓角，默認為方形按鈕
mask	String	遮罩層，有兩種："white"和"black"
animate	String	子菜單動畫,可以引入外部css動畫庫，比如Animate.css
btn	boolean	開關按鈕,填這屬性，則有默認開關按鈕，不填則沒有默認,需要在slot中自行定義開關按鈕
colors	Array	按鈕和菜單的背景顏色

Slot

name	說明
item_btn	自定義開關按鈕
item_1	第一個菜單的內容
item_2	第二個菜單的內容
item_3	第三個菜單的內容
item_4	第四個菜單的內容

詳細說明

Props

type

type參數是必填項，指明菜單的類型，一共有一下六種：top,botoom,left,right,middle,middle-around

     

circle

circle是讓菜單按鈕為圓角，默認是方形按鈕：

 

mask

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

 

animate

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

   

colors

colors是指定按鈕和菜單的背景顏色，不使用該屬性，則會使用默認的顏色配置，該組件默認顏色配置為：

如果要配置顏色，colors傳入數組，另外，很重要的一點,數組的值必須是顏色代碼，而不是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-推ter 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>

注意顏色代碼必須一一對應，第一個顏色代碼指代按鈕，第二個顏色為第一個菜單，依次類推，共五個顏色代碼，填多，填少或者填入的不是顏色代碼都是無效的

Slot

item_btn

該命名slot是指自定義開關按鈕，當你需要自定義開關按鈕，請不要填寫btn屬性，使用該slot,這樣就可以禁用默認的開關按鈕，使用自定義的按鈕。（自定義開關按鈕有個好處，就是可以給開關按鈕綁定事件，做進一步的操作）

item_1,item_2,item_3,item_4

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

思想：

這五個slot，其實就說明該組件其實就一個包裹內容的控件， 里面的內容都在slot設置

• 通過solt，可以填寫任何內容，并且自定義樣式

  <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  slot="item_4" src="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庫，白色遮罩，圓形自定義開關按鈕，默認菜單顏色配置-->
  <cirecle-menu type="middle" animate="animated jello" mask='white' circle>
    <button type="button" slot="item_btn"></button>
    <a slot="item_1" class="fa fa-推ter 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"類型,默認動畫,灰色遮罩，方形默認開關按鈕，自定義菜單顏色配置-->
  <cirecle-menu type="top" mask='black' btn colors="[ '#563761', '#A7425C', '#FFE26F', 'F3825F', '#F19584', ]">
    <a slot="item_1" class="fa fa-推ter 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