vue-circle-menu漂亮的圓形菜單

廢話不多說,先上圖

一, 安裝

npm install vue-circle-menu --save

 

二,  引入  

    若作為全局組件使用

//main.js中

import Vue from 'vue'
import CircleMenu from 'vue-circle-menu'
Vue.component('CircleMenu', CircleMenu)

若作為局部組件

//在某個組件中 

import CircleMenu from 'vue-circle-menu'
export default {
  components: {
    CircleMenu
  }
}

三, 簡單的例子

<circle-menu type="middle" :number="4" 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>
  </circle-menu>
<circle-menu type="top" :number="3" mask='black' btn colors="[ 'rgb(255, 255, 102)', '#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>
</circle-menu>

 

四, 組件參數

名稱	類型	默認值	說明
type	String	-	菜單的類型，支持top,bottom,left,right,middle,middle-around
number	Number	-	菜單項的數量，支持2-5個
animate	String	自定義的過渡動畫
mask	String	-	是否顯示遮罩，以及遮罩的顏色
circle	Boolean	-	菜單按鈕是矩形或者圓形
btn	Boolean	-	菜單按鈕是否顯示按鈕樣式
colors	Array	-	每個菜單按鈕的顏色

 

Demo：http://web-oysun.cn/VueCircleMenu/