一个vue组件，可在应用程序上创建动画的圆形或线性弹出菜单。

安装和下载：

npm install vue-circle-menu

如何使用它：

1.导入VueCircleMenu。

import CircleMenu from 'vue-circle-menu';

2.注册组件。

Vue.component('CircleMenu', CircleMenu)
// 或
export default {
  components: {
    CircleMenu
  }
}

3.将圆形菜单组件添加到应用程序模板。在此示例中，我们将Font Awesome用于图标，将Animate.css用于CSS3动画。

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

4.所有可用的props。

// 必填项,指明菜单的类型,有6种：top,bottom,left,right,middle,middle-around
type: {
  type: String,
  required: true
},
// 必填项，v1.1.0版本新增的api。指定子菜单的个数,数值要大于2小于5，其实就只有2，3，4这三种情况
number: {
  type: Number,
  required: true,
  validator: function (value) {
    return value > 1 && value < 5
  }
},
// 子菜单动画,可以引入外部css动画库，比如Animate.css
animate: String,
// "white" or "black"
mask: String,
// 菜单按钮是否为圆角，默认为方形按钮
circle: Boolean,
// display toggle button
btn: Boolean,
// background color
colors: Array

---

官网：https://github.com/OYsun/VueCircleMenu/blob/master/README-ZH.MD

演示：https://www.vue365.cn/code_demo.php?id=414

GitHub下载：https://github.com/OYsun/VueCircleMenu/archive/master.zip