Button 按钮

常见的操作按钮。

基础用法

使用 type 、 plain 、 round 和 circle 来定义按钮的样式。

<template>
    <p>
        <m-button>Default</m-button>
        <m-button type="primary">Primary</m-button>
        <m-button type="success">Success</m-button>
        <m-button type="info">Info</m-button>
        <m-button type="warning">Warning</m-button>
        <m-button type="danger">Danger</m-button>
    </p>

    <p>
        <m-button plain>Plain</m-button>
        <m-button type="primary" plain>Primary</m-button>
        <m-button type="success" plain>Success</m-button>
        <m-button type="info" plain>Info</m-button>
        <m-button type="warning" plain>Warning</m-button>
        <m-button type="danger" plain>Danger</m-button>
    </p>

    <p>
        <m-button round>Round</m-button>
        <m-button type="primary" round>Primary</m-button>
        <m-button type="success" round>Success</m-button>
        <m-button type="info" round>Info</m-button>
        <m-button type="warning" round>Warning</m-button>
        <m-button type="danger" round>Danger</m-button>
    </p>

    <p>
        <m-button icon="search" circle />
        <m-button type="primary" icon="edit" circle />
        <m-button type="success" icon="check" circle />
        <m-button type="info" icon="message" circle />
        <m-button type="warning" icon="star" circle />
        <m-button type="danger" icon="trash" circle />
    </p>
</template>

禁用状态

你可以使用 disabled 属性来定义按钮是否被禁用。 使用 disabled 属性来控制按钮是否为禁用状态。该属性接受一个 Boolean 类型的值。

<template>
    <p>
        <m-button disabled>Default</m-button>
        <m-button type="primary" disabled>Primary</m-button>
        <m-button type="success" disabled>Success</m-button>
        <m-button type="info" disabled>Info</m-button>
        <m-button type="warning" disabled>Warning</m-button>
        <m-button type="danger" disabled>Danger</m-button>
    </p>
    <p>
        <m-button disabled plain>Default</m-button>
        <m-button type="primary" disabled plain>Primary</m-button>
        <m-button type="success" disabled plain>Success</m-button>
        <m-button type="info" disabled plain>Info</m-button>
        <m-button type="warning" disabled plain>Warning</m-button>
        <m-button type="danger" disabled plain>Danger</m-button>
    </p>
</template>

图标按钮

使用图标为按钮添加更多的含义。 你也可以单独使用图标不添加文字来节省显示区域占用。

使用 icon 属性为按钮添加图标。您可以在 Icon 组件中找到所需图标。

<template>
    <div>
        <m-button type="primary" icon="edit" />
        <m-button type="primary" icon="share" />
        <m-button type="primary" icon="trash" />
        <m-button type="primary" icon="search"> Search </m-button>
        <m-button type="primary">
            Upload <m-icon icon="upload" style="margin-left: 8px" />
        </m-button>
    </div>
</template>

按钮组

以按钮组的方式出现，常用于多项类似操作。

使用 <m-button-group> 对多个按钮分组。

<template>
    <p>
        <m-button-group>
            <m-button type="primary" icon="arrow-left">
                Previous Page
            </m-button>
            <m-button type="primary">
                Next Page <m-icon icon="arrow-right" style="margin-left: 8px" />
            </m-button>
        </m-button-group>
    </p>
    <p>
        <m-button-group type="warning">
            <m-button type="primary" icon="edit" round />
            <m-button type="primary" icon="share" />
            <m-button type="primary" icon="trash" round />
        </m-button-group>
    </p>
</template>

加载状态按钮

点击按钮来加载数据，并向用户反馈加载状态。

通过设置 loading 属性为 true 来显示加载中状态。

TIP

您可以使用 loading 插槽或 loadingIcon 属性自定义您的 loading 图标。

PS : loading 插槽的优先级高于 loadingIcon 属性。

<template>
    <div>
        <m-button type="primary" loading> Loading </m-button>
        <m-button type="primary" loading-icon="circle-notch" loading>
            Loading
        </m-button>
        <m-button type="primary" loading>
            <template #loading>
                <m-icon style="margin-right: 6px" icon="star" spin />
            </template>
            Loading
        </m-button>
    </div>
</template>

调整尺寸

除了默认的大小，按钮组件还提供了几种额外的尺寸可供选择，以便适配不同的场景。

使用 size 属性可以配置尺寸，可选的值有 large 和 small 。

<template>
    <p>
        <m-button size="large"> Large </m-button>
        <m-button> Default </m-button>
        <m-button size="small"> Small </m-button>
        <m-button size="large" icon="search"> Search </m-button>
        <m-button icon="search"> Search </m-button>
        <m-button size="small" icon="search"> Search </m-button>
    </p>
    <p>
        <m-button size="large" round> Large </m-button>
        <m-button round> Default </m-button>
        <m-button size="small" round> Small </m-button>
        <m-button size="large" icon="search" round> Search </m-button>
        <m-button icon="search" round> Search </m-button>
        <m-button size="small" icon="search" round> Search </m-button>
    </p>
    <p>
        <m-button size="large" icon="search" circle />
        <m-button icon="search" circle />
        <m-button size="small" icon="search" circle />
    </p>
</template>

Tag

你可以自定义元素标签。例如按钮，div，路由链接。

div

a

<template>
    <m-button> button </m-button>
    <m-button tag="div" role="button" tabindex="0"> div </m-button>
    <m-button
        type="primary"
        tag="a"
        href="https://github.com/Samuel-Tu/morph.git"
        target="_blank"
        rel="noopener noreferrer"
    >
        a
    </m-button>
</template>

Button API

Button 属性

Name	Description	Type	Default
size	尺寸	enum - 'large'| 'default'| 'small'	—
type	类型	enum - 'primary'| 'success'| 'warning'| 'danger'| 'info'	info
plain	是否为朴素按钮	boolean	false
round	是否为圆角按钮	boolean	false
circle	是否为圆形按钮	boolean	false
loading	是否为加载中状态	boolean	false
loading-icon	自定义加载中状态图标组件	string	spinner
disabled	按钮是否为禁用状态	boolean	false
icon	按钮图标	string	-
autofocus	是否自动聚焦(原生autofocus属性)	boolean	false
native-type	原生 type 属性	enum - 'button'| 'submit'| 'reset'	button
tag	自定义元素标签	string/Component	button
use-throttle	是否使用节流模式	boolean	true
throttle-duration	节流模式下，节流时间间隔(ms)	number	500

Button 事件

Name	Description	Type
click	按钮点击事件	(event: MouseEvent)=> void

Button 插槽

Name	Description
default	默认插槽, 按钮内容
loading	自定义加载图标

Button 方法

Name	Description	Type
ref	按钮 html 元素	Ref<HTMLButtonElement>
size	按钮尺寸	ComputedRef<''|'small' |'large'>
type	按钮类型	ComputedRef<''|'primary' |'success' |'warning' |'danger' |'info'>
disabled	按钮禁用状态	ComputedRef<boolean>

ButtonGroup API

ButtonGroup 属性

Name	Description	Type	Default
size	尺寸	enum - 'large'| 'default'| 'small'	—
type	类型	enum - 'primary'| 'success'| 'warning'| 'danger'| 'info'	info
disabled	按钮组是否为禁用状态	boolean	false

ButtonGroup 插槽

Name	Description	Sub Component
default	默认插槽	Button