Button 组件

常用的操作按钮。

基础用法

使用 type, plain,round 和 circle 来定义样式。

<template>
    <div class="kl-4">
        <kl-button>Default</kl-button>
        <kl-button type="primary">Primary</kl-button>
        <kl-button type="success">Success</kl-button>
        <kl-button type="info">Info</kl-button>
        <kl-button type="warning">Warning</kl-button>
        <kl-button type="danger">Danger</kl-button>
    </div>
    <div class="kl-4">
        <kl-button plain>Default</kl-button>
        <kl-button type="primary" plain>Primary</kl-button>
        <kl-button type="success" plain>Success</kl-button>
        <kl-button type="info" plain>Info</kl-button>
        <kl-button type="warning" plain>Warning</kl-button>
        <kl-button type="danger" plain>Danger</kl-button>
    </div>
    <div class="kl-4">
        <kl-button round>Default</kl-button>
        <kl-button type="primary" round>Primary</kl-button>
        <kl-button type="success" round>Success</kl-button>
        <kl-button type="info" round>Info</kl-button>
        <kl-button type="warning" round>Warning</kl-button>
        <kl-button type="danger" round>Danger</kl-button>
    </div>
    <div class="kl-4">
        <kl-button circle :icon="KlSystemEdit"></kl-button>
        <kl-button type="primary" circle :icon="KlSystemDelete"></kl-button>
        <kl-button type="success" circle :icon="KlSystemSearch"></kl-button>
        <kl-button type="info" circle :icon="KlSystemLoad"></kl-button>
        <kl-button type="warning" circle :icon="KlMediaCameraLine"></kl-button>
        <kl-button type="danger" circle :icon="KlMediaDiscFill"></kl-button>
    </div>
</template>

<script setup lang="ts">
import {
    KlSystemEdit,
    KlSystemDelete,
    KlSystemSearch,
    KlSystemLoad,
    KlMediaCameraLine,
    KlMediaDiscFill
} from '@kl-design/icons'
</script>

<style scoped lang="scss">
.kl-4 {
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;

    & > button {
        margin-bottom: 10px;
    }
}
</style>

禁用状态

你可以使用 disabled 属性来定义按钮是否被禁用。

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

<template>
    <div class="kl-4">
        <kl-button disabled>Default</kl-button>
        <kl-button type="primary" disabled>Primary</kl-button>
        <kl-button type="success" disabled>Success</kl-button>
        <kl-button type="info" disabled>Info</kl-button>
        <kl-button type="warning" disabled>Warning</kl-button>
        <kl-button type="danger" disabled>Danger</kl-button>
    </div>
    <div class="kl-4">
        <kl-button plain disabled>plain</kl-button>
        <kl-button type="primary" plain disabled>Primary</kl-button>
        <kl-button type="success" plain disabled>Success</kl-button>
        <kl-button type="info" plain disabled>Info</kl-button>
        <kl-button type="warning" plain disabled>Warning</kl-button>
        <kl-button type="danger" plain disabled>Danger</kl-button>
    </div>
</template>

<script setup lang="ts"></script>

<style scoped lang="scss">
.kl-4 {
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;

    & > button {
        margin-bottom: 10px;
    }
}
</style>

链接按钮

你可以使用 link 属性来定义按钮是否为链接按钮。

使用 link 属性来控制按钮是否为链接按钮。该属性接收一个 Boolean 类型的值。

<template>
    <div>
        <kl-button v-for="item in link_button" :key="item.text" :type="item.type" link>{{
            item.text
        }}</kl-button
        ><br />
        <kl-button v-for="item in link_button" :key="item.text" :type="item.type" disabled link>{{
            item.text
        }}</kl-button>
    </div>
</template>

<script setup lang="ts">
const link_button = [
    { type: null, text: 'default' },
    { type: 'primary', text: 'primary' },
    { type: 'success', text: 'success' },
    { type: 'danger', text: 'danger' },
    { type: 'info', text: 'info' }
] as const
</script>

<style scoped lang="scss">
button {
    margin: 5px;
}
</style>

文字按钮

没有边框和背景颜色的按钮。

使用 text 属性来控制按钮是否为文字按钮。该属性接受一个 Boolean 类型的值。

<template>
    <div>
        <kl-button v-for="item in link_button" :key="item.text" :type="item.type" text>{{
            item.text
        }}</kl-button
        ><br />
        <kl-button v-for="item in link_button" :key="item.text" :type="item.type" text bg>{{
            item.text
        }}</kl-button
        ><br />
        <kl-button
            v-for="item in link_button"
            :key="item.text"
            :type="item.type"
            link
            text
            bg
            disabled
            >{{ item.text }}</kl-button
        >
    </div>
</template>

<script setup lang="ts">
const link_button = [
    { type: null, text: 'default' },
    { type: 'primary', text: 'primary' },
    { type: 'success', text: 'success' },
    { type: 'danger', text: 'danger' },
    { type: 'info', text: 'info' }
] as const
</script>

<style scoped>
button {
    margin: 5px;
}
</style>

调整尺寸

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

使用 size 属性额外配置尺寸，可使用 mini small normal large 和 xlarge 五种值。

<template>
    <div class="kl-4">
        <kl-button size="mini">Primary</kl-button>
        <kl-button size="small">Success</kl-button>
        <kl-button size="normal">Info</kl-button>
        <kl-button size="large">Warning</kl-button>
        <kl-button size="xlarge">Danger</kl-button>
    </div>
    <div class="kl-4">
        <kl-button round size="mini">mini</kl-button>
        <kl-button round size="small">small</kl-button>
        <kl-button round size="normal">normal</kl-button>
        <kl-button round size="large">large</kl-button>
        <kl-button round size="xlarge">xlarge</kl-button>
    </div>
    <div class="kl-4">
        <kl-button circle :icon="KlSystemEdit" size="mini"></kl-button>
        <kl-button type="primary" circle :icon="KlSystemEdit" size="small"></kl-button>
        <kl-button type="success" circle :icon="KlSystemEdit" size="normal"></kl-button>
        <kl-button type="info" circle :icon="KlSystemEdit" size="large"></kl-button>
        <kl-button type="warning" circle :icon="KlSystemEdit" size="xlarge"></kl-button>
    </div>
</template>

<script setup lang="ts">
import { KlSystemEdit } from '@kl-design/icons'
</script>

<style scoped lang="scss">
.kl-4 {
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;

    & > button {
        margin-bottom: 10px;
    }
}
</style>

属性

属性	说明	类型	可选	默认
type	按钮类型	string	primary\|info\|success\|warning\|danger\|default	default
size	按钮尺寸	string	mini\|small\|normal\|large\|xlarge	normal
color	按钮背景颜色	string
textColor	按钮文字颜色	string
round	是否圆角	boolean		false
plain	纯色按钮	boolean		false
circle	圆	boolean		false
disabled	禁用按钮	boolean		false
link	链接按钮	boolean		false
text	文字按钮	boolean		false
bg	文字按钮模式下是否显示背景	boolean		false
icon	字体图标	object

Button 组件 #

基础用法 #

禁用状态 #

链接按钮 #

文字按钮 #

调整尺寸 #

属性 #