@h3/thinking-ui

# Button 按钮

# 使用指南

import { H3Button } from '@h3/thinking-ui'

Vue.use(H3Button)

export default {
 name: 'h3button',
 components: {
 H3Button,
 H3ButtonGroup: H3Button.Group
 },
}

# 与h3-mobile-vue组件的区别以及迁移

通过对按钮组件梳理，进行重构及统一UI风格，且新增了 H3Button.Group 组件。

其中 ghost 以单独抽离出成prop属性，请直接使用新的prop:ghost。

弃用了 prop:onClick 回调函数，请直接使用事件监听。

若要做迁移请参考

  1. 弃用的props：activeStyle, onClick
  2. 替换的props：
    • hasRadius => radius
    • activeClassName => activeCls
    • direction => layout
  3. 新增的props：ghost

# 代码演示

查看代码

# API

# Prop Button

参数 说明 类型 默认值
radius 是否显示圆角 boolean true
disabled 是否禁用 boolean false
type 样式类型 可选值：default | primary | warning | error | success string 'default'
ghost 幽灵按钮样式 boolean false
size 尺寸 可选值：large | medium | small string large
inline 是否内联 boolean false
loading 是否显示加载状态，加载状态将禁止点击事件触发 boolean false
icon 图标 string -
activeCls 激活状态 class 前缀，将在传入值中添加后缀-active，即demo-button将为 demo-button-active string 'h3-button'

# Event Button

事件名 说明 参数
click 按钮状态不禁止时，点击按钮回调 event: Event

# Prop ButtonGroup

参数 说明 类型 默认值
divide 是否需要显示分割线 boolean false
layout 按钮布局，可选值：horizontal | vertical string 'horizontal'

# Event ButtonGroup

事件名 说明 参数
- - -

← Icon 图标 →