优雅的圆形和线性弹出菜单组件– VueCircleMenu

优雅的圆形和线性弹出菜单组件– VueCircleMenu
插件名称 VueCircleMenu
发布时间 2020年5月4日
插件作者 OYsun

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