本文共 1775 字，大约阅读时间需要 5 分钟。

VueCircleMenu

API

Props

Slot

详细说明

Props

type

type参数是必填项，指明菜单的类型，一共有一下六种：top,botoom,left,right,middle,middle-around

circle

circle是让菜单按钮为圆角，默认是方形按钮：

mask

mask是开关按钮在切换的时候产生的遮罩，分为两种："white"和"black".(注意：不填或填错类型都视为不需要遮罩)

animate

animate是给菜单添加动画，只要添加动画css类即可，可以引入第三方css动画库，比如animate.css

colors

colors是指定按钮和菜单的背景颜色，不使用该属性，则会使用默认的颜色配置，该组件默认颜色配置为：

如果要配置颜色，colors传入数组，另外，很重要的一点,数组的值必须是颜色代码，而不是css类.例如:

注意颜色代码必须一一对应，第一个颜色代码指代按钮，第二个颜色为第一个菜单，依次类推，共五个颜色代码，填多，填少或者填入的不是颜色代码都是无效的

Slot

item_btn

该命名slot是指自定义开关按钮，当你需要自定义开关按钮，请不要填写btn属性，使用该slot,这样就可以禁用默认的开关按钮，使用自定义的按钮。（自定义开关按钮有个好处，就是可以给开关按钮绑定事件，做进一步的操作）

item_1,item_2,item_3,item_4

该类slot分别指代四个菜单按钮

思想：

这五个slot，其实就说明该组件其实就一个包裹内容的控件， 里面的内容都在slot设置

• 通过solt，可以填写任何内容，并且自定义样式

• 通过slot,给菜单绑定事件

简单的例子

安装和使用

npm install vue-circle-menu

• 若作为全局组件使用

//在项目入口文件import Vue from 'vue'import CircleMenu from 'vue-circle-menu'Vue.component('CircleMenu', CircleMenu)

• 若作为局部组件

//在某个组件中import CircleMenu from 'vue-circle-menu'export default {  components: {    CircleMenu  }}

bug和建议

如果在使用中遇到问题或者建议，欢迎提issues

转载地址：http://pshni.baihongyu.com/