VueCircleMenu | 一款基于vuejs的炫酷圆形菜单组件

VueCircleMenu是一款基于vuejs的炫酷圆形菜单组件。使用简单，支持圆形菜单的数量，颜色，动画等属性的自定义配置。

使用方法

安装

如果您想使用VueCircleMenu圆形菜单组件，首先您需要安装它，命令如下：

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
  }
}
		

简单示例代码

<!--middle"类型, 四个子菜单，动画引入animate.css库，白色遮罩，圆形自定义开关按钮，默认菜单颜色配置-->
<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>

<!--"top"类型,三个子菜单，默认动画,灰色遮罩，方形默认开关按钮，自定义菜单颜色配置-->
<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>      
    

配置参数

VueCircleMenu圆形菜单组件的可用配置参数如下：

• type：必填项,指明菜单的类型,有6种：top,bottom,left,right,middle,middle-around。
• number：必填项，v1.1.0版本新增的api。指定子菜单的个数,数值要大于2小于5，其实就只有2，3，4这三种情况。
• circle：布尔值。菜单按钮是否为圆角，默认为方形按钮。
• mask：遮罩层，有两种："white"和"black"。
• animate：子菜单动画,可以引入外部css动画库，比如Animate.css。
• btn：布尔值。开关按钮,填这属性，则有默认开关按钮，不填则没有默认,需要在slot中自行定义开关按钮。
• colors：按钮和菜单的背景颜色。

插槽

Vue Easy Slider轮播图插件的可用事件如下：

• change：在slide序号发生改变时触发。
• next：在next按钮被点击时触发。
• previous：在previous按钮被点击时触发。

插槽

VueCircleMenu圆形菜单组件有下面的可用插槽：

• item_btn: 自定义开关按钮
• item_1: 第一个菜单的内容
• item_2: 第二个菜单的内容
• item_3: 第三个菜单的内容
• item_4: 第四个菜单的内容

github网址：https://github.com/OYsun/VueCircleMenu