# Button
按钮
# 介绍
按钮,提供几种基础样式和尺寸,可自定义图标。
# 引入
import { Button } from 'mind-ui-vue';
Vue.use(Button);
# 示例
# 按钮类型
按钮支持 default
、primary
、success
、info
、warning
、danger
六种类型,默认为 default
。
<m-button>默认按钮</m-button>
<m-button type="primary">主要按钮</m-button>
<m-button type="success">成功按钮</m-button>
<m-button type="info">信息按钮</m-button>
<m-button type="warning">警告按钮</m-button>
<m-button type="danger">危险按钮</m-button>
# 朴素按钮
通过 plain
属性将按钮设置为朴素按钮,朴素按钮的文字为按钮颜色,背景为白色。
<m-button type="primary" plain>朴素按钮</m-button>
<m-button type="success" plain>朴素按钮</m-button>
# 圆角按钮
通过 round
属性来设置圆角按钮。
<m-button type="primary" round>圆角按钮</m-button>
<m-button type="success" round>圆角按钮</m-button>
# 禁用状态
通过 disabled
属性来禁用按钮,禁用状态下按钮不可点击。
<m-button type="primary" disabled>禁用状态</m-button>
<m-button type="success" disabled>禁用状态</m-button>
# 按钮尺寸
支持 normal
、small
、mini
三种尺寸,默认为 normal
。
<m-button type="primary" size="normal">普通按钮</m-button>
<m-button type="primary" size="small">小型按钮</m-button>
<m-button type="primary" size="mini">迷你按钮</m-button>
# 自定义颜色
通过 color
属性可以自定义按钮的颜色。
<m-button color="#7232dd">单色按钮</m-button>
# Api
# Props
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
size | 大小 | String | normal small mini | normal |
type | 类型 | String | ghost white primary success warning danger info | — |
plain | 朴素按钮 | Boolean | — | false |
round | 圆角 | Boolean | — | false |
loading | 加载中 | Boolean | — | false |
disabled | 禁用 | Boolean | — | false |
color | 字体颜色 | String | — | — |
bgcolor | 背景色,支持传入 linear-gradient 渐变色 | String | — | — |
# Events
事件名称 | 说明 | 返回值 |
---|---|---|
click | 非 disabled ,loading 状态时可触发的点击事件 | event |
# Slots
名称 | 说明 |
---|---|
— | 按钮内容 |