Button 按钮

常用的操作按钮组件。

基础用法

通过组件标签 NueButton 声明一个按钮组件。

<template>
    <nue-button>按钮 (Button)</nue-button>
</template>

设置前置图标

通过属性 icon 指定按钮的前置图标。

TIP

前置图标的实现使用了组件库的图标组件 NueIcon ，属性可选值请参考 Icon 图标组件文档中的 所有图标 一节。

<template>
    <nue-button icon="search">搜索 (Search)</nue-button>
</template>

设置禁用状态

通过属性 disabled 使按钮组件处于禁用状态。属性接受 boolean 类型的值，为 true 时表示禁用。

<template>
    <nue-button disabled>禁用状态</nue-button>
</template>

设置大小

通过属性 size 设置按钮的大小。属性接受 small 和 large 两个可选值，分别对应小和大两个尺寸。

<template>
    <nue-div align="center">
        <nue-button size="small">Button 按钮</nue-button>
        <nue-button size="large">Button 按钮</nue-button>
    </nue-div>
</template>

加载状态

通过属性 loading 使按钮组件处于加载状态。属性接受 boolean 类型的值，为 true 时表示加载中。

<template>
    <nue-button :loading="loading" icon="search" @click="changeLoading">搜索</nue-button>
</template>

<script setup>
import { ref } from 'vue';

const loading = ref(false);

const changeLoading = () => {
    loading.value = true;
    setTimeout(() => (loading.value = false), 3000);
};
</script>

设置其他的加载图标

通过属性 loading-icon 配置按钮在加载中的图标。属性值与 icon 属性相同。默认情况下的加载图标为 loading。

<template>
    <nue-button :loading="loading" icon="search" loading-icon="scan" @click="changeLoading">
        搜索
    </nue-button>
</template>

<script setup>
import { ref } from 'vue';

const loading = ref(false);

const changeLoading = () => {
    loading.value = true;
    setTimeout(() => (loading.value = false), 3000);
};
</script>

节流

在启用了节流模式，并且按钮组件在点击时，会限制点击频率，防止用户重复点击。即在设置的节流间隔内，按钮组件将不能再次点击。

通过属性 use-throttle 启用节流模式；属性 throttle-duration 设置节流间隔。节流单位为 ms，默认值为 200 。

<template>
    <nue-button use-throttle :throttle-duration="600" @click="count++">
        节流计数：{{ count }}
    </nue-button>
</template>

<script setup>
import { ref } from 'vue';

const count = ref(0);
</script>

后置扩展插槽

通过插槽 #append 可以在按钮文字的后方插入自定义的元素。

<template>
    <nue-div align="center">
        <nue-button icon="search" style="width: 128px">
            搜索
            <template #append>
                <nue-icon name="more" />
            </template>
        </nue-button>
        <nue-button icon="search" style="width: 128px">
            搜索
            <template #append>(k)</template>
        </nue-button>
    </nue-div>
</template>

按钮组及统一属性控制

通过 NueButtonGroup 组件可以将多个按钮以按钮组的形式排列。

按钮组组件 NueButtonGroup 拥有 size 和 disabled 属性控制组中按钮的对应属性。

• size 用于控制按钮组中的按钮大小。
• disabled 用于控制按钮组中的按钮是否禁用。

TIP

当按钮的属性和按钮组的属性同时被指定时，按钮组的属性会优先于按钮自身的属性。

<template>
    <nue-div align="center">
        <nue-button-group>
            <nue-button icon="search">搜索</nue-button>
            <nue-button disabled icon="plus">添加</nue-button>
            <nue-button icon="more">更多</nue-button>
        </nue-button-group>
        <nue-button-group disabled size="small">
            <nue-button icon="search">搜索</nue-button>
            <nue-button :disabled="false" icon="plus">添加</nue-button>
            <nue-button icon="more">更多</nue-button>
        </nue-button-group>
    </nue-div>
</template>