Button 按钮

基于 Element Plus 的 el-button 二次封装，支持所有 ElButton 原生属性和事件。

基础用法

使用 type 属性定义按钮样式。

展示不同类型、样式变体、状态和尺寸。

类型

样式变体

状态

尺寸

<template>
  <div class="demo-section">
    <p class="demo-title">类型</p>
    <div class="demo-row">
      <hx-button>Default</hx-button>
      <hx-button type="primary">Primary</hx-button>
      <hx-button type="success">Success</hx-button>
      <hx-button type="warning">Warning</hx-button>
      <hx-button type="danger">Danger</hx-button>
      <hx-button type="info">Info</hx-button>
    </div>

    <p class="demo-title">样式变体</p>
    <div class="demo-row">
      <hx-button plain>Plain</hx-button>
      <hx-button round>Round</hx-button>
      <hx-button dashed>Dashed</hx-button>
      <hx-button circle>+</hx-button>
    </div>

    <p class="demo-title">状态</p>
    <div class="demo-row">
      <hx-button disabled>Disabled</hx-button>
      <hx-button :loading="loading" @click="loading = true">Loading</hx-button>
    </div>

    <p class="demo-title">尺寸</p>
    <div class="demo-row">
      <hx-button size="large">Large</hx-button>
      <hx-button>Default</hx-button>
      <hx-button size="small">Small</hx-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { HxButton } from '@whhx/ui'

const loading = ref(false)
</script>

<style scoped>
.demo-section {
  padding: 4px 0;
}
.demo-title {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--el-text-color-secondary);
  font-weight: 500;
}
.demo-title + .demo-title {
  margin-top: 24px;
}
.demo-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
</style>

API

Props

继承 ElButton 所有属性，常用属性如下：

名称	说明	类型	默认值
type	按钮类型	'primary' | 'success' | 'warning' | 'danger' | 'info'	-
size	按钮尺寸	'large' | 'default' | 'small'	-
plain	是否为朴素按钮	boolean	false
round	是否为圆角按钮	boolean	false
circle	是否为圆形按钮	boolean	false
dashed	是否为虚线边框	boolean	false
disabled	是否禁用	boolean	false
loading	是否加载中	boolean	false

其他 ElButton 原生属性均可通过 v-bind="$attrs" 透传。

Events

继承 ElButton 所有事件。

Slots

插槽名	说明
default	按钮内容