废话不多说,先上图
一, 安装
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