peach-split-button

vue 悬停分割按钮 split button with hover effect component for Vue.js

在线预览 | Preview demo

https://taoqi0813.github.io/#/peach-split-button

快速上手 | Getting started

安装 | Installation

npm install -S peach-split-button

在 main.js 引用 | In Main.js:

import PeachSplitBtn from 'peach-split-button'
Vue.use(PeachSplitBtn)

用法 | Usage

<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>

配置 | Options

• 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

插槽 | slots

slot="default"

• 菜单 | menu

slot="label"

• 按钮文本 | button label

更新日志 | Log

| 版本号 | 更新时间 | 更新内容 | | ------ | --------- | ------------------------------------------ | | 0.1.2 | 2021/1/26 | 去掉 menu 默认样式，增加 custom-class 属性 | | 0.1.1 | 2021/1/14 | 增加 z-index 属性 | | 0.1.0 | 2021/1/13 | 初始化项目 |