Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/oysun/vuecirclemenu
:rabbit:A beautiful circle menu powered by Vue.js
https://github.com/oysun/vuecirclemenu
component menu ui-design vue vuejs
Last synced: 30 days ago
JSON representation
:rabbit:A beautiful circle menu powered by Vue.js
- Host: GitHub
- URL: https://github.com/oysun/vuecirclemenu
- Owner: OYsun
- License: mit
- Created: 2017-01-14T18:14:26.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2017-02-09T15:01:52.000Z (almost 8 years ago)
- Last Synced: 2024-05-07T13:42:35.388Z (6 months ago)
- Topics: component, menu, ui-design, vue, vuejs
- Language: CSS
- Homepage:
- Size: 1.49 MB
- Stars: 1,220
- Watchers: 48
- Forks: 190
- Open Issues: 19
-
Metadata Files:
- Readme: README-ZH.MD
- License: LICENSE
Awesome Lists containing this project
README
# VueCircleMenu
# demo
为了更好的演示请使用手机扫描下面的二维码查看demo,或点击这里：http://web-oysun.cn/VueCircleMenu/
# API
## Props
| 参数 | 类型 | 说明 |
| ------------- |-------------| -----|
| type | String |必填项,指明菜单的类型,有6种：top,bottom,left,right,middle,middle-around |
| number(v1.1.0) | Number |必填项，v1.1.0版本新增的api。指定子菜单的个数,数值要大于2小于5，其实就只有2，3，4这三种情况 |
| circle | boolean | 菜单按钮是否为圆角，默认为方形按钮 |
| mask | String | 遮罩层，有两种："white"和"black" |
| animate | String | 子菜单动画,可以引入外部css动画库，比如Animate.css |
| btn | boolean | 开关按钮,填这属性，则有默认开关按钮，不填则没有默认,需要在slot中自行定义开关按钮 |
| colors | Array | 按钮和菜单的背景颜色 |
## Slot
| SlotName | 说明 |
| -------------| -----|
| item_btn | 自定义开关按钮 |
| item_1 | 第一个菜单的内容 |
| item_2 | 第二个菜单的内容 |
| item_3 | 第三个菜单的内容 |
| item_4 | 第四个菜单的内容 |
# 详细说明
## Props
### type
`type`参数是必填项，指明菜单的类型，一共有一下六种：top,bottom,left,right,middle,middle-around
### number
`number`是v1.1.0版本的api之前版本没有此项参数，固定四个子菜单。注意：
- 当`number`的数值为3，既有3个子菜单的时候，`type`为`middle`和`middle-around`类型无效
- `number` 参数填入的是数值，但是在vue属性中，填写"4"数值其实以字符串的形式，所以如果想传递一个实际的 JavaScript 数字，需要使用 v-bind ，从而让它的值被当作 JavaScript 表达式计算。详情看[vue文档](http://cn.vuejs.org/v2/guide/components.html#字面量语法-vs-动态语法)
## circle
`circle`是让菜单按钮为圆角，默认是方形按钮：
## mask
`mask`是开关按钮在切换的时候产生的遮罩，分为两种："white"和"black".(注意：不填或填错类型都视为不需要遮罩)
## animate
`animate`是给菜单添加动画，只要添加动画css类即可，可以引入第三方css动画库，比如animate.css
## colors
`colors`是指定按钮和菜单的背景颜色，不使用该属性，则会使用默认的颜色配置，该组件默认颜色配置为：
如果要配置颜色，`colors`传入数组，另外，很重要的一点,数组的值必须是颜色代码，而不是css类.例如:
```html
```
注意颜色代码必须一一对应，第一个颜色代码指代按钮，第二个颜色为第一个菜单，依次类推，共五个颜色代码，填多，填少或者填入的不是颜色代码都是无效的
## Slot
### item_btn
该命名`slot`是指自定义开关按钮，当你需要自定义开关按钮，请不要填写`btn`属性，使用该`slot`,这样就可以禁用默认的开关按钮，使用自定义的按钮。（自定义开关按钮有个好处，就是可以给开关按钮绑定事件，做进一步的操作）
### item_1,item_2,item_3,item_4
该类`slot`分别指代四个菜单按钮
### 思想：
这五个`slot`，其实就说明该组件其实就一个包裹内容的控件， 里面的内容都在`slot`设置
- 通过`slot`，可以填写任何内容，并且自定义样式
```html
```
- 通过`slot`,给菜单绑定事件
## 简单的例子
```html
```html
# 安装和使用
```javascript
npm install vue-circle-menu
```
- 若作为全局组件使用
```javascript
//在项目入口文件
import Vue from 'vue'
import CircleMenu from 'vue-circle-menu'
Vue.component('CircleMenu', CircleMenu)
```
- 若作为局部组件
```javascript
//在某个组件中
import CircleMenu from 'vue-circle-menu'
export default {
components: {
CircleMenu
}
}
```
# bug和建议
如果在使用中遇到问题或者建议，欢迎提`issues`
# LICENSE
MIT