Button 按钮

常用的操作按钮

基础用法

使用 type 、size 、 status 和 shape 来定义按钮的样式。

<template>
  <p>
    <l-button>Default</l-button>
    <l-button type="primary">Primary</l-button>
    <l-button type="dashed">Dashed</l-button>
    <l-button type="outline">Outline</l-button>
    <l-button type="text">Text</l-button>
  </p>
</template>

图标按钮

使用 icon 属性来定义按钮的图标。

<template>
  <p>
    <l-button type="primary" icon="edit" />
    <l-button type="primary" icon="share" />
    <l-button type="primary" icon="trash" />
    <l-button type="primary" icon="search">Search</l-button>
    <l-button type="primary"> Upload<l-icon icon="upload" style="margin-left: 8px" /> </l-button>
  </p>
</template>

按钮形状

使用 square 、circle 、 round 来定义按钮的形状。

<template>
  <p>
    <l-button>Square</l-button>
    <l-button shape="round">Round</l-button>
    <l-button shape="circle" icon="plus"></l-button>
  </p>
</template>

按钮状态

使用 normal - 正常(默认) 、success 、 warning 和 danger 来定义按钮的状态。

<template>
  <p>
    <l-button>Default</l-button>
    <l-button type="primary">Primary</l-button>
    <l-button type="dashed">Dashed</l-button>
    <l-button type="outline">Outline</l-button>
    <l-button type="text">Text</l-button>
  </p>
  <p>
    <l-button status="success">Default</l-button>
    <l-button type="primary" status="success">Primary</l-button>
    <l-button type="dashed" status="success">Dashed</l-button>
    <l-button type="outline" status="success">Outline</l-button>
    <l-button type="text" status="success">Text</l-button>
  </p>
  <p>
    <l-button status="warning">Default</l-button>
    <l-button type="primary" status="warning">Primary</l-button>
    <l-button type="dashed" status="warning">Dashed</l-button>
    <l-button type="outline" status="warning">Outline</l-button>
    <l-button type="text" status="warning">Text</l-button>
  </p>
  <p>
    <l-button status="danger">Default</l-button>
    <l-button type="primary" status="danger">Primary</l-button>
    <l-button type="dashed" status="danger">Dashed</l-button>
    <l-button type="outline" status="danger">Outline</l-button>
    <l-button type="text" status="danger">Text</l-button>
  </p>
</template>

按钮尺寸

使用 default - 正常(默认) 、small 、和 large 来定义按钮的尺寸。

<template>
  <p>
    <l-button size="small">Small</l-button>
    <l-button>Default</l-button>
    <l-button size="large">Large</l-button>
  </p>
</template>

按钮组

使用 <l-button-group> 对多个按钮分组。

<template>
  <p>
    <l-button-group>
      <l-button type="primary" icon="arrow-left">Previous Page</l-button>
      <l-button type="primary">
        Next Page<l-icon icon="arrow-right" style="margin-left: 8px" />
      </l-button>
    </l-button-group>
  </p>
  <p>
    <l-button-group type="primary" size="small">
      <l-button status="warning" icon="edit" />
      <l-button status="warning" icon="share" />
      <l-button status="warning" icon="trash" />
    </l-button-group>
  </p>
</template>

禁用状态

按钮的禁用状态。

<template>
  <p>
    <l-button disabled>Default</l-button>
    <l-button disabled type="primary">Primary</l-button>
    <l-button disabled type="dashed">Dashed</l-button>
    <l-button disabled type="outline">Outline</l-button>
    <l-button disabled type="text">Text</l-button>
  </p>
  <p>
    <l-button disabled status="success">Default</l-button>
    <l-button disabled type="primary" status="success">Primary</l-button>
    <l-button disabled type="dashed" status="success">Dashed</l-button>
    <l-button disabled type="outline" status="success">Outline</l-button>
    <l-button disabled type="text" status="success">Text</l-button>
  </p>
  <p>
    <l-button disabled status="warning">Default</l-button>
    <l-button disabled type="primary" status="warning">Primary</l-button>
    <l-button disabled type="dashed" status="warning">Dashed</l-button>
    <l-button disabled type="outline" status="warning">Outline</l-button>
    <l-button disabled type="text" status="warning">Text</l-button>
  </p>
  <p>
    <l-button disabled status="danger">Default</l-button>
    <l-button disabled type="primary" status="danger">Primary</l-button>
    <l-button disabled type="dashed" status="danger">Dashed</l-button>
    <l-button disabled type="outline" status="danger">Outline</l-button>
    <l-button disabled type="text" status="danger">Text</l-button>
  </p>
</template>

加载状态

使用 loading 属性来定义按钮的加载状态。

<template>
  <p>
    <l-button type="primary" loading>Loading</l-button>
    <l-button type="primary" loading-icon="circle-notch" loading>Loading</l-button>
    <l-button type="primary" loading>
      <template #loading>
        <l-icon style="margin-right: 6px" icon="star" spin />
      </template>
      Loading
    </l-button>
  </p>
</template>

节流模式

可以通过 useThrottle 属性来定义按钮是否使用节流模式 默认为 false, 通过 throttleDuration 调整间隔 默认为 500ms。

<template>
  <l-button :use-throttle="true" :throttle-duration="1000">useThrottle</l-button>
  <l-button>withoutThrottle</l-button>
</template>

API

Props

参数名	描述	类型	默认值
size	按钮大小	Enum - "large" | "default" | "small"	"default"
type	按钮类型	Enum - "primary" | "dashed" | "outline" | "text"	—
html-type	设置button的原生type属性	Enum - "button" | "reset" | "submit"	"button"
status	按钮状态	Enum - "normal" | "success" | "warning" | "danger"	"normal"
shape	按钮形状	Enum - "square" | "circle" | "round"	"square"
icon	自定义图标	string | Component	—
tag	自定义元素标签	string | Component	"button"
disabled	是否禁用	Boolean	false
loading	是否加载中	Boolean	false
autofocus	是否自动聚焦	Boolean	false
useThrottle	是否开启节流模式	Boolean	false
throttleDuration	节流模式间隔	Number	500

Events

事件名	描述	参数
click	点击按钮时触发	(e: MouseEvent)

Slots

插槽名	描述
default	默认插槽