Lost-UI

Appearance

Button 按钮 ​

按钮用于触发一个即时操作。可以自定义样式、图标、大小及状态等，以满足不同的操作需求。

基础用法 ​

通过 type、plain、round 和 circle 属性来定义不同风格的按钮。

<template>
  <div class="basic block">
    <l-button> hello </l-button>
    <l-button type="primary"> Primary </l-button>
    <l-button type="success"> Success </l-button>
    <l-button type="warning"> Warning </l-button>
    <l-button type="danger"> Danger </l-button>
    <l-button type="info"> Info </l-button>
  </div>

  <div class="plain block">
    <l-button plain> hello </l-button>
    <l-button type="primary" plain> Primary </l-button>
    <l-button type="success" plain> Success </l-button>
    <l-button type="warning" plain> Warning </l-button>
    <l-button type="danger" plain> Danger </l-button>
    <l-button type="info" plain> Info </l-button>
  </div>

  <div class="round block">
    <l-button round> hello </l-button>
    <l-button type="primary" round> Primary </l-button>
    <l-button type="success" round> Success </l-button>
    <l-button type="warning" round> Warning </l-button>
    <l-button type="danger" round> Danger </l-button>
    <l-button type="info" round> Info </l-button>
  </div>

  <div class="circle block">
    <l-button circle> <l-icon icon="star" /> </l-button>
    <l-button type="primary" circle> <l-icon icon="star" /> </l-button>
    <l-button type="success" circle> <l-icon icon="star" /> </l-button>
    <l-button type="warning" circle> <l-icon icon="star" /> </l-button>
    <l-button type="danger" circle> <l-icon icon="star" /> </l-button>
    <l-button type="info" circle> <l-icon icon="star" /> </l-button>
  </div>
</template>
<style scoped>
.block {
  margin-bottom: 10px;
  display: flex;
  gap: 8px;
}
</style>

禁用状态 ​

使用 disabled 属性可以让按钮处于不可点击状态，适用于需要禁止用户操作的场景。

<template>
  <div class="disabled block">
    <l-button disabled> hello </l-button>
    <l-button type="primary" disabled> Primary </l-button>
    <l-button type="success" disabled> Success </l-button>
    <l-button type="warning" disabled> Warning </l-button>
    <l-button type="danger" disabled> Danger </l-button>
    <l-button type="info" disabled> Info </l-button>
  </div>

  <div class="disabled-plain block">
    <l-button plain disabled> hello </l-button>
    <l-button type="primary" plain disabled> Primary </l-button>
    <l-button type="success" plain disabled> Success </l-button>
    <l-button type="warning" plain disabled> Warning </l-button>
    <l-button type="danger" plain disabled> Danger </l-button>
    <l-button type="info" plain disabled> Info </l-button>
  </div>
</template>

<style scoped>
.block {
  margin-bottom: 10px;
  display: flex;
  gap: 8px;
}
</style>

图标按钮 ​

通过 icon 属性为按钮添加图标。图标可以增强用户体验，方便传达操作意义。图标使用请参考 FontAwesome 图标库。

<template>
  <div class="icon block">
    <l-button icon="star"> Star Button </l-button>
  </div>
</template>

加载状态 ​

通过设置 loading 属性为 true 来显示加载状态的按钮，适用于后台操作执行中的状态反馈。

<template>
  <div class="loading block">
    <l-button loading> Loading... </l-button>
  </div>
</template>

按钮尺寸 ​

使用 size 属性可以调整按钮的大小，支持 small、default、large 三种尺寸，适应不同场景的需求。

<template>
  <div class="size block">
    <l-button size="large"> Large </l-button>
    <l-button type="primary"> default </l-button>
    <l-button type="success" size="small"> Small </l-button>
  </div>
</template>

<style scoped>
.block {
  margin-bottom: 10px;
  display: flex;
  gap: 8px;
}
</style>

Button 属性 ​

属性名称描述类型默认值
size按钮尺寸'large' | 'default' | 'small'default
type按钮类型'primary' | 'success' | 'warning' | 'danger' | 'info'—
plain是否为朴素按钮booleanfalse
round是否为圆角按钮booleanfalse
circle是否为圆形按钮booleanfalse
loading是否显示加载状态booleanfalse
disabled是否禁用按钮booleanfalse
icon按钮图标string—
autofocus同原生按钮的 autofocus 属性booleanfalse
native-type同原生按钮的 type 属性'button' | 'submit' | 'reset'button