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/

 

转载于:https://www.cnblogs.com/tangwei89/p/11577189.html