# 按钮 Button

基础组件,触发业务逻辑时使用。

# 按钮类型

Primary Normal Danger Text
按钮类型

按钮有以下类型:主按钮,一般按钮,警告按钮,文字按钮

<title>按钮类型</title>
<describe>按钮有以下类型:主按钮,一般按钮,警告按钮,文字按钮</describe>
<template>
    <hc-button type="primary" >Primary</hc-button>
    <hc-button type="normal">Normal</hc-button>
    <hc-button type="danger">Danger</hc-button>
    <hc-button type="text">Text</hc-button>
</template>

# 禁用状态

Primary Normal Danger Text
禁用状态

按钮不可用状态。

<title>禁用状态</title>
<describe>按钮不可用状态。</describe>
<template>
    <hc-button type="primary" :disabled="true">Primary</hc-button>
    <hc-button type="normal" :disabled="true">Normal</hc-button>
    <hc-button type="danger" :disabled="true">Danger</hc-button>
    <hc-button type="text" :disabled="true">Text</hc-button>
</template>

# 图标按钮

搜索
图标按钮

带图标的按钮可增强辨识度(有文字)或节省空间(无文字)。

<title>图标按钮</title>
<describe>带图标的按钮可增强辨识度(有文字)或节省空间(无文字)。</describe>
<template>
    <hc-button type="primary"><span class="el-icon-edit"></span></hc-button>
    <hc-button type="normal"><span class="el-icon-share"></span></hc-button>
    <hc-button type="danger"><span class="el-icon-delete"></span></hc-button>
    <hc-button type="text"><span class="el-icon-search"></span> 搜索</hc-button>
</template>

# 加载中控制

Primary Normal Danger Text
加载中

点击按钮后进行数据加载操作,在按钮上显示加载状态。

<title>加载中</title>
<describe>点击按钮后进行数据加载操作,在按钮上显示加载状态。</describe>
<template>
    <hc-button type="primary" :loading="true">Primary</hc-button>
    <hc-button type="normal" :loading="true">Normal</hc-button>
    <hc-button type="danger" :loading="true">Danger</hc-button>
    <hc-button type="text" :loading="true">Text</hc-button>
</template>

# 不同尺寸

medium small mini
不同尺寸

Button 组件提供除了默认值以外的三种尺寸,可以在不同场景下选择合适的按钮尺寸。

<title>不同尺寸</title>
<describe>Button 组件提供除了默认值以外的三种尺寸,可以在不同场景下选择合适的按钮尺寸。</describe>
<template>
    <hc-button type="primary" size="medium">medium</hc-button>
    <hc-button type="normal" size="small">small</hc-button>
    <hc-button type="danger" size="mini">mini</hc-button>
</template>

# 属性及事件

# HcButton属性

属性 说明 类型 可选值 默认值
type 按钮类型 string default/primary/danger/text default
size 按钮显示大小 string default/medium/small/mini false
disabled 是否禁用 boolean -- false
loading 设置等待状态 boolean -- false
block 是否是块级 boolean -- false

# HcButton事件

名称 说明 参数
click 按钮点击事件 evt: 鼠标点击事件对象

# HcButton插槽

名称 说明
default 按钮内容插槽,可自定义按钮内容