vue 悬停分割按钮
split button with hover effect component for Vue.js
https://taoqi0813.github.io/#/peach-split-button
npm install -S peach-split-button
import PeachSplitBtn from 'peach-split-button'
Vue.use(PeachSplitBtn)
<peach-split-btn
:label="label"
:active="active"
:split="split"
:width="width"
:left="left"
:top="top"
:z-index="zIndex"
:bg-color="bgColor"
:text-color="textColor"
:custom-class="customClass"
:click-func="btnClick"
>
这里用slot自己插菜单
</peach-split-btn>
-
label
- 按钮的文本 | main-button label
- 类型: String | Type: String
- 默认值: '' | Default: ''
- 可用插槽替代,slot="label"
-
active
- 激活状态 | button active state
- 类型: Boolean | Type: Boolean
- 默认值: false | Default: false
-
split
- 是否分割 | split button or not
- 类型: Boolean | Type: Boolean
- 默认值: true | Default: true
-
width
- 按钮宽度 | button width
- 类型: [String, Number] | Type: [String, Number]
- 不要带单位,固定 px | no unit, is 'px'
- 默认值: 120 | Default: 120
-
left
- 菜单 left | menu left
- 类型: [String, Number] | Type: [String, Number]
- 不要带单位,固定 px | no unit, is 'px'
- 默认值: 0 | Default: 0
-
top
- 菜单 top | menu top
- 类型: [String, Number] | Type: [String, Number]
- 不要带单位,固定 px | no unit, is 'px'
- 默认值: 0 | Default: 0
-
z-index
- 菜单 z-index | menu z-index
- 类型: [String, Number] | Type: [String, Number]
- 默认值: 1 | Default: 1
-
bg-color
- 按钮背景色 | button background color
- 类型: String | Type: String
- 默认值: '#1976d2' | Default: '#1976d2'
-
text-color
- 按钮文本色 | button color
- 类型: String | Type: String
- 默认值: '#fff' | Default: '#fff'
-
custom-class
- 按钮自定义 class | button custom class
- 类型: String | Type: String
- 默认值: '' | Default: ''
-
click-func
- 主按钮点击事件回调函数 | main-button click function
- 类型: Function | Type: Function
- 回调参数: click event | Arg: click event
- 菜单 | menu
- 按钮文本 | button label
版本号 | 更新时间 | 更新内容 |
---|---|---|
0.1.2 | 2021/1/26 | 去掉 menu 默认样式,增加 custom-class 属性 |
0.1.1 | 2021/1/14 | 增加 z-index 属性 |
0.1.0 | 2021/1/13 | 初始化项目 |