按钮 es-button

通过点击元素发起一个命令或操作。

示例代码

<script setup lang="ts">
import { ref } from 'vue';
const loading = ref(true);
</script>

<template>
    <div class="button-box">
        <!-- "default" | "primary" | "link" | "ghost", -->
        <es-button type="default">default</es-button>
        <es-button type="primary">primary</es-button>
        <es-button type="link">link</es-button>
        <es-button type="ghost">ghost</es-button>
        <es-button type="plain">plain</es-button>
        <br>
        <!-- "success" | "info" | "warning" | "danger", -->
        <es-button status="success">success </es-button>
        <es-button status="info">info </es-button>
        <es-button status="warning">warning </es-button>
        <es-button status="danger">danger</es-button>
        <es-button type="primary" status="success"> link danger</es-button>
        <es-button type="primary" status="info"> link danger</es-button>
        <es-button type="primary" status="warning"> link danger</es-button>
        <es-button type="primary" status="danger"> link danger</es-button>
        <es-button type="link" status="danger"> link danger</es-button>

        <es-button type="plain" status="success">plain</es-button>
        <br>
        <!-- "xs" | "sm" | "md" | "lg", -->
        <es-button size="xs">xs</es-button>
        <es-button size="sm">sm</es-button>
        <es-button size="md">md</es-button>
        <es-button size="lg">lg</es-button>
        <br>
        <!-- "square" | "bend" | "round", -->
        <es-button shape="square">square</es-button>
        <es-button shape="bend">bend</es-button>
        <es-button shape="round">round</es-button>
        <br>
        <!-- disabled-->
        <es-button disabled type="default">default</es-button>
        <es-button disabled type="primary">primary</es-button>
        <es-button disabled type="link">link</es-button>
        <es-button disabled type="ghost">ghost</es-button>
        <es-button disabled type="plain">plain</es-button>

        <es-button disabled status="success">success </es-button>
        <es-button disabled status="info">info </es-button>
        <es-button disabled status="warning">warning </es-button>
        <es-button disabled status="danger">danger</es-button>
        <es-button disabled type="primary" status="danger"> link danger</es-button>
        <es-button disabled type="link" status="danger"> link danger</es-button>
        <es-button disabled type="link" status="info"> link info</es-button>
    </div>
</template>

<style scoped>
.button-box>button {
    margin: 10px;
    margin-left: 0px;
}
</style>

Attributes

属性名	说明	类型	默认值
type	类型	enum	default
size	尺寸	enum	md
status	状态	enum	""
shape	形状	enum	bend
disabled	是否禁用	boolean	false