本文共 1775 字,大约阅读时间需要 5 分钟。
参数 | 类型 | 说明 |
---|---|---|
type | String | 必填项,指明菜单的类型,有6种:top,botoom,left,right,middle,middle-around |
circle | boolean | 菜单按钮是否为圆角,默认为方形按钮 |
mask | String | 遮罩层,有两种:"white"和"black" |
animate | String | 子菜单动画,可以引入外部css动画库,比如Animate.css |
btn | boolean | 开关按钮,填这属性,则有默认开关按钮,不填则没有默认,需要在slot中自行定义开关按钮 |
colors | Array | 按钮和菜单的背景颜色 |
name | 说明 |
---|---|
item_btn | 自定义开关按钮 |
item_1 | 第一个菜单的内容 |
item_2 | 第二个菜单的内容 |
item_3 | 第三个菜单的内容 |
item_4 | 第四个菜单的内容 |
type
参数是必填项,指明菜单的类型,一共有一下六种:top,botoom,left,right,middle,middle-around
circle
是让菜单按钮为圆角,默认是方形按钮:
mask
是开关按钮在切换的时候产生的遮罩,分为两种:"white"和"black".(注意:不填或填错类型都视为不需要遮罩)
animate
是给菜单添加动画,只要添加动画css类即可,可以引入第三方css动画库,比如animate.css
colors
是指定按钮和菜单的背景颜色,不使用该属性,则会使用默认的颜色配置,该组件默认颜色配置为:
如果要配置颜色,colors
传入数组,另外,很重要的一点,数组的值必须是颜色代码,而不是css类.例如:
注意颜色代码必须一一对应,第一个颜色代码指代按钮,第二个颜色为第一个菜单,依次类推,共五个颜色代码,填多,填少或者填入的不是颜色代码都是无效的
该命名slot
是指自定义开关按钮,当你需要自定义开关按钮,请不要填写btn
属性,使用该slot
,这样就可以禁用默认的开关按钮,使用自定义的按钮。(自定义开关按钮有个好处,就是可以给开关按钮绑定事件,做进一步的操作)
该类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 }}
如果在使用中遇到问题或者建议,欢迎提issues
转载地址:http://pshni.baihongyu.com/