{"id":13535736,"url":"https://github.com/OYsun/VueCircleMenu","last_synced_at":"2025-04-02T02:31:18.693Z","repository":{"id":57394940,"uuid":"78957596","full_name":"OYsun/VueCircleMenu","owner":"OYsun","description":":rabbit:A beautiful circle menu powered by Vue.js","archived":false,"fork":false,"pushed_at":"2017-02-09T15:01:52.000Z","size":1561,"stargazers_count":1217,"open_issues_count":19,"forks_count":190,"subscribers_count":48,"default_branch":"master","last_synced_at":"2024-10-29T17:53:50.673Z","etag":null,"topics":["component","menu","ui-design","vue","vuejs"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/OYsun.png","metadata":{"files":{"readme":"README-ZH.MD","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-01-14T18:14:26.000Z","updated_at":"2024-10-27T14:32:14.000Z","dependencies_parsed_at":"2022-09-06T02:52:23.789Z","dependency_job_id":null,"html_url":"https://github.com/OYsun/VueCircleMenu","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OYsun%2FVueCircleMenu","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OYsun%2FVueCircleMenu/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OYsun%2FVueCircleMenu/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OYsun%2FVueCircleMenu/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/OYsun","download_url":"https://codeload.github.com/OYsun/VueCircleMenu/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246540523,"owners_count":20793930,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["component","menu","ui-design","vue","vuejs"],"created_at":"2024-08-01T09:00:24.754Z","updated_at":"2025-04-02T02:31:18.669Z","avatar_url":"https://github.com/OYsun.png","language":"CSS","readme":"# VueCircleMenu\n\n\u003cimg src=\"./src/images/index.gif\"\u003e\n\n# demo\n为了更好的演示请使用手机扫描下面的二维码查看demo,或点击这里：http://web-oysun.cn/VueCircleMenu/\n\n\u003cimg src=\"./src/images/demo.png\"\u003e\n\n# API\n\n## Props\n\n| 参数    | 类型    | 说明   |\n| ------------- |-------------| -----|\n| type | String |必填项,指明菜单的类型,有6种：top,bottom,left,right,middle,middle-around |\n| number(v1.1.0) | Number |必填项，v1.1.0版本新增的api。指定子菜单的个数,数值要大于2小于5，其实就只有2，3，4这三种情况 |\n| circle | boolean | 菜单按钮是否为圆角，默认为方形按钮 |\n| mask | String | 遮罩层，有两种：\"white\"和\"black\" |\n| animate | String | 子菜单动画,可以引入外部css动画库，比如Animate.css |\n| btn | boolean | 开关按钮,填这属性，则有默认开关按钮，不填则没有默认,需要在slot中自行定义开关按钮 |\n| colors | Array | 按钮和菜单的背景颜色 |\n\n## Slot\n\n| SlotName    | 说明   |\n| -------------| -----|\n| item_btn  | 自定义开关按钮 |\n| item_1 | 第一个菜单的内容 |\n| item_2 | 第二个菜单的内容 |\n| item_3 | 第三个菜单的内容 |\n| item_4 | 第四个菜单的内容 |\n\n# 详细说明\n\n## Props\n\n### type\n`type`参数是必填项，指明菜单的类型，一共有一下六种：top,bottom,left,right,middle,middle-around\n\n\u003cimg src=\"./src/images/top.gif\" width=\"250\"\u003e\n\u003cimg src=\"./src/images/bottom.gif\" width=\"250\"\u003e\n\u003cimg src=\"./src/images/left.gif\" width=\"250\"\u003e\n\u003cimg src=\"./src/images/right.gif\" width=\"250\"\u003e\n\u003cimg src=\"./src/images/middle.gif\" width=\"250\"\u003e\n\u003cimg src=\"./src/images/middle-around.gif\" width=\"250\"\u003e\n\n### number\n`number`是v1.1.0版本的api之前版本没有此项参数，固定四个子菜单。注意：\n- 当`number`的数值为3，既有3个子菜单的时候，`type`为`middle`和`middle-around`类型无效\n- `number` 参数填入的是数值，但是在vue属性中，填写\"4\"数值其实以字符串的形式，所以如果想传递一个实际的 JavaScript 数字，需要使用 v-bind ，从而让它的值被当作 JavaScript 表达式计算。详情看[vue文档](http://cn.vuejs.org/v2/guide/components.html#字面量语法-vs-动态语法)\n\n## circle\n`circle`是让菜单按钮为圆角，默认是方形按钮：\n\n\u003cimg src=\"./src/images/cirecle.gif\" width=\"300\"\u003e\n\u003cimg src=\"./src/images/ani04.gif\" width=\"300\"\u003e\n\n## mask\n`mask`是开关按钮在切换的时候产生的遮罩，分为两种：\"white\"和\"black\".(注意：不填或填错类型都视为不需要遮罩)\n\n\u003cimg src=\"./src/images/mask.gif\" width=\"300\"\u003e\n\u003cimg src=\"./src/images/middle-around.gif\" width=\"300\"\u003e\n\n## animate\n`animate`是给菜单添加动画，只要添加动画css类即可，可以引入第三方css动画库，比如animate.css\n\n\u003cimg src=\"./src/images/ani.gif\" width=\"300\"\u003e\n\u003cimg src=\"./src/images/ani02.gif\" width=\"300\"\u003e\n\u003cimg src=\"./src/images/ani03.gif\" width=\"300\"\u003e\n\u003cimg src=\"./src/images/ani04.gif\" width=\"300\"\u003e\n\n## colors\n`colors`是指定按钮和菜单的背景颜色，不使用该属性，则会使用默认的颜色配置，该组件默认颜色配置为：\n\n  \u003cimg src=\"./src/images/colors.PNG\" width=\"300\"\u003e\n\n如果要配置颜色，`colors`传入数组，\u003cb\u003e另外，很重要的一点,数组的值必须是颜色代码，而不是css类.\u003c/b\u003e例如:\n\n```html\n\n  \u003ccircle-menu type='bottom' :number='4' colors=\"[ '#563761', 'rgb(255, 255, 102)', '#FFE26F', '#F3825F', '#F19584']\"\u003e\n    \u003cbutton type=\"button\" slot=\"item_btn\"\u003e\u003c/button\u003e\n    \u003ca slot=\"item_1\" class=\"fa fa-twitter fa-lg\" herf=\"#\" \u003e\u003c/a\u003e\n    \u003ca slot=\"item_2\" class=\"fa fa-weixin fa-lg\" herf=\"#\" \u003e\u003c/a\u003e\n    \u003ca slot=\"item_3\" class=\"fa fa-weibo fa-lg\" herf=\"#\" \u003e\u003c/a\u003e\n    \u003ca slot=\"item_4\" class=\"fa fa-github fa-lg\" herf=\"#\" \u003e\u003c/a\u003e\n  \u003c/circle-menu\u003e\n```\n注意颜色代码必须一一对应，第一个颜色代码指代按钮，第二个颜色为第一个菜单，依次类推，共五个颜色代码，填多，填少或者填入的不是颜色代码都是无效的\n\n## Slot\n\n### item_btn\n该命名`slot`是指自定义开关按钮，当你需要自定义开关按钮，请不要填写`btn`属性，使用该`slot`,这样就可以禁用默认的开关按钮，使用自定义的按钮。（自定义开关按钮有个好处，就是可以给开关按钮绑定事件，做进一步的操作）\n\n### item_1,item_2,item_3,item_4\n该类`slot`分别指代四个菜单按钮\n\n### 思想：\n这五个`slot`，其实就说明该组件其实就一个包裹内容的控件， 里面的内容都在`slot`设置\n\n- 通过`slot`，可以填写任何内容，并且自定义样式\n```html\n  \u003ccircle-menu type=\"top\"\u003e\n    \u003cbutton type=\"button\" slot=\"item_btn\"\u003e\u003c/button\u003e\n    \u003crouter-link :to=\"...\" slot=\"item_1\"\u003e\n    \u003cspan slot=\"item_2\"\u003e\u003c/a\u003e\n    \u003cdiv slot=\"item_3\"\u003e\u003c/a\u003e\n    \u003cimg  slot=\"item_4\" src=\"img\" /\u003e\n  \u003c/circle-menu\u003e\n```\n- 通过`slot`,给菜单绑定事件\n\n```html\n  \u003ccircle-menu type=\"middle-around\" :number='4'\u003e\n    \u003cbutton type=\"button\" slot=\"item_btn\" @click=\"dosomething\" \u003e\u003c/button\u003e\n    \u003ca slot=\"item_1\" herf=\"#\" @click=\"\"\u003e\u003c/a\u003e\n    \u003cv-touch tag=\"a\" v-on:tap=\"onTap\" slot=\"item_2\"\u003e\u003c/v-touch\u003e\n    \u003cv-touch tag=\"a\" v-on:tap=\"onTap\" slot=\"item_3\"\u003e\u003c/v-touch\u003e\n    \u003ca slot=\"item_4\" herf=\"#\" v-on:handler=\"handler\"\u003e\u003c/a\u003e\n  \u003c/circle-menu\u003e\n```\n\n\n## 简单的例子\n```html\n\u003c!--\"middle\"类型, 四个子菜单，动画引入animate.css库，白色遮罩，圆形自定义开关按钮，默认菜单颜色配置--\u003e\n  \u003ccircle-menu type=\"middle\" :number='4' animate=\"animated jello\" mask='white' circle\u003e\n    \u003cbutton type=\"button\" slot=\"item_btn\"\u003e\u003c/button\u003e\n    \u003ca slot=\"item_1\" class=\"fa fa-twitter fa-lg\"\u003e\u003c/a\u003e\n    \u003ca slot=\"item_2\" class=\"fa fa-weixin fa-lg\"\u003e\u003c/a\u003e\n    \u003ca slot=\"item_3\" class=\"fa fa-weibo fa-lg\"\u003e\u003c/a\u003e\n    \u003ca slot=\"item_4\" class=\"fa fa-github fa-lg\"\u003e\u003c/a\u003e\n  \u003c/circle-menu\u003e\n```\n\n```html\n\u003c!--\"top\"类型,三个子菜单，默认动画,灰色遮罩，方形默认开关按钮，自定义菜单颜色配置--\u003e\n  \u003ccircle-menu type=\"top\" :number='3' mask='black' btn colors=\"[ 'rgb(255, 255, 102)', '#A7425C', '#FFE26F', 'F3825F', '#F19584']\"\u003e\n    \u003ca slot=\"item_1\" class=\"fa fa-twitter fa-lg\"\u003e\u003c/a\u003e\n    \u003ca slot=\"item_2\" class=\"fa fa-weixin fa-lg\"\u003e\u003c/a\u003e\n    \u003ca slot=\"item_3\" class=\"fa fa-weibo fa-lg\"\u003e\u003c/a\u003e\n  \u003c/circle-menu\u003e\n```\n\n# 安装和使用\n\n```javascript\nnpm install vue-circle-menu\n```\n\n- 若作为全局组件使用\n\n```javascript\n//在项目入口文件\nimport Vue from 'vue'\nimport CircleMenu from 'vue-circle-menu'\nVue.component('CircleMenu', CircleMenu)\n```\n\n- 若作为局部组件\n\n```javascript\n//在某个组件中\nimport CircleMenu from 'vue-circle-menu'\nexport default {\n  components: {\n    CircleMenu\n  }\n}\n```\n# bug和建议\n\n如果在使用中遇到问题或者建议，欢迎提`issues`\n\n# LICENSE\n\nMIT","funding_links":[],"categories":["CSS","UI组件"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FOYsun%2FVueCircleMenu","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FOYsun%2FVueCircleMenu","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FOYsun%2FVueCircleMenu/lists"}