# Button 按钮
# 基础用法
使用type=default来定义Button,或者不设置type
Basic Button
<template>
<ef-button>button</ef-button>
</template>
显示代码复制代码复制代码
# 不同类型的按钮
使用type来定义Button
Basic Button
<template>
<ef-button class="" type="default">default</ef-button>
<ef-button class="margin-left" type="primary">primary</ef-button>
<ef-button class="margin-left" type="danger">danger</ef-button>
</template>
显示代码复制代码复制代码
# 带图标的按钮
使用icon属性添加图标，全部Icon请见Icon组件
Basic Button
<template>
<div class="margin-top flex-base">
<ef-button icon="icon-search">search</ef-button>
<ef-button icon="icon-integral-fill1" class="margin-left">search</ef-button>
<ef-button icon="icon-favorites-fill" class="margin-left">search</ef-button>
</div>
<div class="margin-top flex-base">
<ef-button type="primary" icon="icon-search">search</ef-button>
<ef-button type="primary" icon="icon-integral-fill1" class="margin-left">search</ef-button>
<ef-button type="primary" icon="icon-favorites-fill" class="margin-left">search</ef-button>
</div>
<div class="margin-top flex-base">
<ef-button type="danger" icon="icon-search">search</ef-button>
<ef-button type="danger" icon="icon-integral-fill1" class="margin-left">search</ef-button>
<ef-button type="danger" icon="icon-favorites-fill" class="margin-left">search</ef-button>
</div>
</template>
显示代码复制代码复制代码
# 不同形状的按钮
使用shape属性定义不同形状按钮
Basic Button
<template>
<div class="margin-top flex-base">
<ef-button shape="circle" icon="icon-search"></ef-button>
<ef-button type="primary" shape="circle" icon="icon-integral-fill1" class="margin-left"></ef-button>
<ef-button type="danger" shape="circle" icon="icon-favorites-fill" class="margin-left"></ef-button>
</div>
<div class="margin-top flex-base">
<ef-button shape="round">button</ef-button>
<ef-button type="primary" shape="round" icon="icon-integral-fill1" class="margin-left">button</ef-button>
<ef-button type="danger" shape="round" icon="icon-favorites-fill" class="margin-left">button</ef-button>
</div>
</template>
显示代码复制代码复制代码
# 不同大小的按钮
使用size属性定义不同尺寸按钮,圆形按钮请手动设置按钮padding设置大小
Basic Button
<template>
<div class="margin-top flex-base">
<ef-button>default</ef-button>
<ef-button size="middle" type="primary" class="margin-left">middle</ef-button>
<ef-button size="small" type="danger" class="margin-left">small</ef-button>
</div>
<div class="margin-top flex-base">
<ef-button shape="round">button</ef-button>
<ef-button size="middle" type="primary" shape="round" icon="icon-integral-fill1" class="margin-left">button</ef-button>
<ef-button size="small" type="danger" shape="round" icon="icon-favorites-fill" class="margin-left">button</ef-button>
</div>
</template>
显示代码复制代码复制代码
# 加载中的按钮
使用loading属性定义加载中按钮
Basic Button
<template>
<div class="margin-top flex-base">
<ef-button loading>loading</ef-button>
<ef-button loading type="primary" class="margin-left">loading</ef-button>
</div>
</template>
显示代码复制代码复制代码
# 禁用的按钮
使用disabled属性定义禁用按钮
Basic Button
<template>
<div class="margin-top flex-base">
<ef-button disabled>disabled</ef-button>
<ef-button disabled type="primary" class="margin-left">disabled</ef-button>
</div>
</template>
显示代码复制代码复制代码
# 自定义背景色的按钮
使用style属性设置背景色、边框、文字颜色
Basic Button
<template>
<ef-button style="background-color: #626aef;color: #fff;border: 1px solid #626aef;" type="primary">
primary
</ef-button>
</template>
显示代码复制代码复制代码
# Button 配置项
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| type | 按钮类型 | String | primary,danger | default |
| icon | 按钮图标 | String | 参见Icon图标组件 | - |
| iconFontSize | 按钮图标fontSize | String,Number | 对应Icon图标组件fontSize属性 | - |
| shape | 按钮形状 | String | circle，round | - |
| loading | loading | Boolean | - | false |
| size | String | middle，small | - | - |