# Button 按鈕

基礎操作按鈕。type/size/plain/block/round/circle/loading 等形態齊全,支援渲染為 <a> 連結。

按鈕形態
<template>
  <div class="demo-col">
    <div class="demo-row">
      <LhButton>預設按鈕</LhButton>
      <LhButton type="primary">主要按鈕</LhButton>
      <LhButton type="success">成功</LhButton>
      <LhButton type="warning">警告</LhButton>
      <LhButton type="danger">危險</LhButton>
    </div>
    <div class="demo-row">
      <LhButton type="primary" plain>樸素按鈕</LhButton>
      <LhButton type="primary" round>圓角按鈕</LhButton>
      <LhButton type="primary" circle icon="lh-icon-search" />
      <LhButton type="primary" loading>載入中</LhButton>
      <LhButton type="primary" disabled>停用</LhButton>
    </div>
    <div class="demo-row">
      <LhButton size="small">小型</LhButton>
      <LhButton size="medium">預設尺寸</LhButton>
      <LhButton size="large">大型</LhButton>
      <LhButton type="primary" block style="max-width: 200px">塊級(block)</LhButton>
    </div>
    <div class="demo-row">
      <LhButton icon="lh-icon-search">圖示按鈕</LhButton>
      <LhButton native-type="submit" type="primary">原生 type=submit</LhButton>
      <LhButton href="https://lh-ui.lhgb.top" target="_blank">連結按鈕(href)</LhButton>
    </div>
  </div>
</template>

# Props

屬性 說明 類型 預設值
type 按鈕類型 'default' \| 'primary' 等(LH_BUTTON_TYPE_CONST) 'default'
size 尺寸,不傳則從 ConfigProvider 繼承 'small' \| 'medium' \| 'large' —
loading 載入狀態(禁點 + spinner) boolean false
disabled 停用 boolean false
plain / block / round / circle 形態修飾 boolean false
icon 內建圖示類別名 string ''
nativeType 原生 type 'button' \| 'submit' \| 'reset' 'button'
href / target 傳入 href 渲染為 <a> string '' / '_self'
themeVars / bgPattern / sx 主題覆蓋(見主題章節) — —

# Events

事件 說明 回呼參數
click loading/disabled 時不可點選 (e: MouseEvent)

# Slots

插槽 說明
default 按鈕文字
icon 自訂圖示(覆蓋預設 <i>)

Copyright © 2024-2026 风默文学 | 宁ICP备2024006574号 | 公安备案徽标苏公网安备32040002010537