A beautiful circle menu powered by Vue.js

欧阳森

Last update: Dec 16, 2022

Related tags

Overview

VueCircleMenu

查看中文文档，请移步至这里

demo

For a better demonstration, please use the phone scan the following two-dimensional code view demo or click here http://web-oysun.cn/VueCircleMenu/

API

Props

Option	type	Description
type	String	Necessary,Specifies the type of menu,There are six types of：top,bottom,left,right,middle,middle-around
number(v1.1.0)	Number	Necessary,This is the v1.1.0 version of the api, specify the number of menus, the value should be greater than 2 less than 5, is only 2,3,4 of these three case
circle	boolean	Whether the menu button for rounded corners, the default for the square button
mask	String	There are two kinds of mask layer："white" and "black"
animate	String	Sub menu animation,You can import an external css animation library, such as "animate.css"
btn	boolean	Switch button, fill in this property, there is the default switch button, do not fill is not the default, you need to define the switch button in the slot
colors	Array	The background color of the buttons and menus

Slot

SlotName	Description
item_btn	Customize the switch button
item_1	The contents of the first menu
item_2	The content of the second menu
item_3	The content of the third menu
item_4	The content of the fourth menu

Detailed instructions

Props

type

The type parameter is required, indicating the type of the menu, a total of about six：top,bottom,left,right,middle,middle-around

number

The number parameter is required,This is the v1.1.0 version of the api, specify the number of menus, the value should be greater than 2 less than 5, is only 2,3,4 of these three case Note:

when the number value of 3, type type for middle or middle-around is invalid
The number parameter fills the number, but in the vue propes,If we want to pass down an actual JavaScript number, we need to use v-bind so that its value is evaluated as a JavaScript expression.For more information click here

circle

Fill in circle to make the menu button rounded, the default is the square button：

mask

Fill in mask produces mask, divided into two kinds: "white" and "black".(Note: do not fill out or fill in the wrong type all think don't need a mask)

animate

Animate is to add animation to the menu, as long as you can add animation css class, you can also introduce css animation library, such as animate.css

colors

Colors specifies the background color of the button and menu, and does not use this property, the default color configuration is used, and the default color of the component is：

If you want to configure the color, colors into an array，In addition, it is important that an array of values must be color code, rather than the CSS class.

  <circle-menu type="bottom" :number="4" colors="[ '#563761', 'rgb(255, 255, 102)', '#FFE26F', '#F3825F', '#F19584' ]">
    <button type="button" slot="item_btn">button>
    <a slot="item_1" class="fa fa-twitter fa-lg" herf="#" >a>
    <a slot="item_2" class="fa fa-weixin fa-lg" herf="#" >a>
    <a slot="item_3" class="fa fa-weibo fa-lg" herf="#" >a>
    <a slot="item_4" class="fa fa-github fa-lg" herf="#" >a>
  circle-menu>

Note color code must be one-to-one correspondence, the first color code to refer to the button, the second color for the first menu and so on, a total of five color code, fill more, fill less or not fill in the color code is invalid

Slot

item_btn

The name slot refers to the custom switch button, and when you need to customize the switch button, do not fill in the btn property, use the slot, so you can disable the default switch button and use the custom button（Custom switch button has the advantage that you can bind events to the switch button to do further operations）

item_1,item_2,item_3,item_4

These slot one-to-one correspondence refer to the four menu button

principle：

According to these five slot,Actually means that the component is actually a parcel content box ,The contents of the box are set in slot

Through slot, you can fill in any content, and custom style

  <circle-menu type="top" :number="4">
    <button type="button" slot="item_btn">button>
    <router-link :to="..." slot="item_1">
    <span slot="item_2">a>
    <div slot="item_3">a>
    <img  slot="item_4" src="img" />
  circle-menu>

Through slot, to bind any event for menu

  <circle-menu type="middle-around" :number="4">
    <button type="button" slot="item_btn" @click="dosomething" >button>
    <a slot="item_1" herf="#" @click="">a>
    <v-touch tag="a" v-on:tap="onTap" slot="item_2">v-touch>
    <v-touch tag="a" v-on:tap="onTap" slot="item_3">v-touch>
    <a slot="item_4" herf="#" v-on:handler="handler">a>
  circle-menu>

Simple example


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

Installation and use

npm install vue-circle-menu

If used as a global component

//In the project entry file
import Vue from 'vue'
import CircleMenu from 'vue-circle-menu'
Vue.component('CircleMenu', CircleMenu)

If as a local component

//In a component
import CircleMenu from 'vue-circle-menu'
export default {
  components: {
    CircleMenu
  }
}

Bug and suggestions

If you encounter problems or suggestions in the use, welcome to issues

LICENSE

MIT

Comments

English translation

Hey guys,

this menu is pretty nice. Is it possible to translate the documentation in English so more people can use your VueCircleMenu?

Thanks in advance Sven

opened by sveeen 3
colors不能正常使用

[Vue warn]: Invalid prop: type check failed for prop "colors". Expected Array, got String. (found in component <CirleMenu>) 添加colors报错

opened by MaomaoFE 2
Font awesome square issue

I have a problem with some of my font awesome

I used the code above inside my vue file, but only thing i saw is square, home icon and cube icons is OK, but not custom brand favicon and other 2 icon, is there any way to trouble shoot, thanks

opened by GreenRidingHood 1
文档部分

本来想在你基础上做一个定制的，但是下载代码下来看发现有点困难。主要是才开始学webpack所以对你打包部分不是很了解，如果可以的话希望能够相应部分说明文档。再有一个是个人觉得demo写得不是很好，这个产品应该是具备独立使用的，但是index.html并没有使用到最终打包出来的CircleMenu.js文件啊，所以对于怎么引用你这个文件并不清楚。

opened by rowthan 1

为什么我的animate没有效果

我在我的main.js里面已经导入了animate.css，在我的其他组件里面可以用，但是在这却无效

<CircleMenu type="top" :number='4' animate="animated jello" mask='black' circle>
      <button type="button" slot="item_btn"></button>
      <a slot="item_1" class="fa fa-twitter fa-lg">a</a>
      <a slot="item_2" class="fa fa-weixin fa-lg">b</a>
      <a slot="item_3" class="fa fa-weibo fa-lg">c</a>
      <a slot="item_4" class="fa fa-github fa-lg">d</a>
</CircleMenu>

opened by dxwb 0

Link to Demo page.

I cane upon this Github page when reading blogs on my phone. Only there is no way to go to the demo page when you look at this github page on your phone... Please add a link!

opened by mesqueeb 0
Is it possible to display 3 buttons with `middle...` type?

It seems that selecting 3 buttons doesn't work for middle or middle-around menu types; only 2 or 4 buttons works.

Also (and I probably should log a separate issue but), it would be nice to support a few more buttons and/or submenus. 🤷‍♂️

opened by humblecoder 0

Releases(V1.1.0)

V1.1.0(Jan 23, 2017)
fix #12 ，新增"number"参数，自定义子菜单个数

提取圆环大小为less变量，统一px单位

优化middle和middle-around中的less代码

Source code(tar.gz)
Source code(zip)
V1.0.1(Jan 23, 2017)
fix点击黑白mask无法切换菜单 https://github.com/OYsun/VueCircleMenu/issues/6

增加colors参数的判断

更新包依赖，修复Vue packages version mismatch error的错误

Source code(tar.gz)
Source code(zip)