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

当前位置:主页 > Vue > Vue组件 > VueCircleMenu | 一款基于vuejs的炫酷圆形菜单组件
VueCircleMenu | 一款基于vuejs的炫酷圆形菜单组件
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:05-31
    阅读:
简要教程

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