Button 按钮

常用的操作按钮组件。

基础用法

使用 NueButton 创建一个按钮。

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

TIP

前置图标的实现使用了组件库的图标组件 NueIcon ，关于属性 icon 的可选值请参考 Icon 图标 组件文档。

<template>
    <nue-div>
        <nue-button>Button 按钮</nue-button>
        <nue-button icon="search">Search 搜索</nue-button>
        <nue-button icon="refresh">Refresh 刷新</nue-button>
    </nue-div>
</template>

禁用状态

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

<template>
    <nue-div>
        <nue-button>可用状态</nue-button>
        <nue-button disabled>不可用状态</nue-button>
    </nue-div>
</template>

设置按钮大小

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

<template>
    <nue-div align="center">
        <nue-button size="large">Button 按钮</nue-button>
        <nue-button>Button 按钮</nue-button>
        <nue-button size="small">Button 按钮</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>

加载状态以及加载图标

通过 loading 属性设置按钮的加载状态；通过 loading-icon 属性设置按钮在处于加载状态时所显示的图标。

TIP

• 当按钮组件处于加载态时会同时处于不可用状态。
• loading-icon 的属性值与 icon 属性相同。

<template>
    <nue-div>
        <nue-button :loading="loading1" icon="search" @click="changeLoading1">
            搜索
        </nue-button>
        <nue-button
            :loading="loading2"
            icon="refresh"
            loading-icon="refresh"
            @click="changeLoading2"
        >
            刷新
        </nue-button>
    </nue-div>
</template>

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

const loading1 = ref(false);
const loading2 = ref(false);

const changeLoading1 = () => {
    loading1.value = true;
    setTimeout(() => (loading1.value = false), 3000);
};

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

节流

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

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

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

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

对齐方式

通过属性 alignment 设置按钮组件内元素的对齐方式。属性值为 left、center 以及 right 。

<template>
    <nue-div align="stretch" vertical>
        <nue-button alignment="start" icon="search">搜索</nue-button>
        <nue-button alignment="center" icon="search">搜索</nue-button>
        <nue-button alignment="end" icon="search">搜索</nue-button>
    </nue-div>
</template>

扩展插槽

通过插槽 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>

添加自定义类名以及使用预设主题

通过 theme 属性可以给按钮添加自定义的类名。

属性接受 string 以及 string[] 类型的值，表示一个或多个自定义的类名。

预设主题包括 icon-only、 primary 以及 pure。

<template>
    <nue-div align="center" gap="24px">
        <nue-button theme="round">圆角</nue-button>
        <nue-button icon="search" theme="icon" title="图标主题" />
        <nue-button theme="primary">主要</nue-button>
        <nue-button theme="secondary">次要</nue-button>
        <nue-button theme="destructive">破坏</nue-button>
        <nue-button theme="ghost">幽灵</nue-button>
        <nue-button theme="pure">纯净</nue-button>
        <nue-button :theme="{ round: true, primary: true }">
            多主题应用：主要+圆角
        </nue-button>
    </nue-div>
</template>

<style scoped>
.nue-button--custom {
    --color: white;
    --font-weight: bold;
    --border-color: transparent;
    --background-color: #4992ff;
    --hover-background-color: #4381df;
    --active-background-color: #3f75c7;
    --primary-radius: 0px;
}
</style>
<script setup lang="ts"></script>