Button 按钮

可点击按钮。

组件注册

import { FButton } from '@fesjs/fes-design';

app.use(FButton);

代码演示

基础用法

play

<template>
    <FForm labelWidth="100px">
        <FFormItem label="按钮大小:">
            <FRadioGroup
                v-model="size"
                :options="[
                    { label: 'small', value: 'small' },
                    { label: 'middle(默认)', value: 'middle' },
                    { label: 'large', value: 'large' },
                ]"
            />
        </FFormItem>
        <FFormItem label="是否加载状态:">
            <FRadioGroup
                v-model="loading"
                :options="[
                    { label: '否(默认)', value: false },
                    { label: '是', value: true },
                ]"
            />
        </FFormItem>
        <FFormItem label="是否禁用状态:">
            <FRadioGroup
                v-model="disabled"
                :options="[
                    { label: '否(默认)', value: false },
                    { label: '是', value: true },
                ]"
            />
        </FFormItem>
    </FForm>

    <FDivider />

    <FSpace>
        <FButton :size="size" :loading="loading" :disabled="disabled">
            Default
        </FButton>
        <FButton
            type="primary"
            :size="size"
            :loading="loading"
            :disabled="disabled"
        >
            Primary
        </FButton>
        <FButton
            type="text"
            :size="size"
            :loading="loading"
            :disabled="disabled"
        >
            Text
        </FButton>
        <FButton
            type="link"
            :size="size"
            :loading="loading"
            :disabled="disabled"
        >
            Link
        </FButton>
    </FSpace>

    <FDivider />

    <FSpace>
        <FButton
            type="info"
            :size="size"
            :loading="loading"
            :disabled="disabled"
        >
            Info
        </FButton>
        <FButton
            type="success"
            :size="size"
            :loading="loading"
            :disabled="disabled"
        >
            Success
        </FButton>
        <FButton
            type="warning"
            :size="size"
            :loading="loading"
            :disabled="disabled"
        >
            Warning
        </FButton>
        <FButton
            type="danger"
            :size="size"
            :loading="loading"
            :disabled="disabled"
        >
            Danger
        </FButton>
    </FSpace>
</template>

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

const size = ref('middle');
const loading = ref(false);
const disabled = ref(false);
</script>

Icon 按钮

play

<template>
    <FSpace>
        <FButton type="primary" :loading="true">
            <template #icon>
                <ProductOutlined />
            </template>
        </FButton>
        <FButton>
            <template #icon> <ProductOutlined /> </template>Default
        </FButton>
        <FButton type="primary">
            <template #icon> <ProductOutlined /> </template>Primary
        </FButton>
        <FButton type="text">
            <template #icon> <ProductOutlined /> </template>Text
        </FButton>
        <FButton type="link">
            <template #icon> <ProductOutlined /> </template>Link
        </FButton>
    </FSpace>
</template>

long 按钮

play

<template>
    <FSpace vertical>
        <FButton size="small" long>Default</FButton>
        <FButton type="info" long>Info</FButton>
        <FButton type="primary" size="large" long>Primary</FButton>
    </FSpace>
</template>

Props

属性	说明	类型	默认值
disabled	按钮禁用状态	boolean	false
size	按钮大小，可选值 small middle large	string	middle
htmlType	设置 button 的原生 type 值，可选值请参考 HTML 标准	string	button
loading	按钮加载状态	boolean	false
long	按钮按钮宽度为父元素宽度	boolean	false
throttle	节流	number	300
type	设置按钮类型，可选值为 primary text link info success warning danger	string	default

Slots

slot 名称	说明
icon	按钮图标

Events

事件名称	说明	回调参数
click	按钮点击事件	(event) => void