N-UI

Appearance

Button 按钮 ​

常用的操作按钮。

基础用法 ​

使用 type、plain、round 和 circle 属性来定义按钮的样式。

vue
<template>
  <div style="display: flex; gap: 12px; flex-wrap: wrap;">
    <NButton>默认按钮</NButton>
    <NButton type="primary">主要按钮</NButton>
    <NButton type="success">成功按钮</NButton>
    <NButton type="warning">警告按钮</NButton>
    <NButton type="danger">危险按钮</NButton>
    <NButton type="info">信息按钮</NButton>
  </div>
</template>

朴素按钮 ​

设置 plain 属性可以得到朴素按钮。

vue
<template>
  <div style="display: flex; gap: 12px; flex-wrap: wrap;">
    <NButton plain>朴素按钮</NButton>
    <NButton type="primary" plain>主要按钮</NButton>
    <NButton type="success" plain>成功按钮</NButton>
    <NButton type="warning" plain>警告按钮</NButton>
    <NButton type="danger" plain>危险按钮</NButton>
    <NButton type="info" plain>信息按钮</NButton>
  </div>
</template>

圆角按钮 ​

设置 round 属性可以得到圆角按钮。

vue
<template>
  <div style="display: flex; gap: 12px; flex-wrap: wrap;">
    <NButton round>圆角按钮</NButton>
    <NButton type="primary" round>主要按钮</NButton>
    <NButton type="success" round>成功按钮</NButton>
    <NButton type="warning" round>警告按钮</NButton>
    <NButton type="danger" round>危险按钮</NButton>
    <NButton type="info" round>信息按钮</NButton>
  </div>
</template>

圆形按钮 ​

设置 circle 属性可以得到圆形按钮。

vue
<template>
  <div style="display: flex; gap: 12px; flex-wrap: wrap;">
    <NButton circle>搜</NButton>
    <NButton type="primary" circle>添</NButton>
    <NButton type="success" circle>✓</NButton>
    <NButton type="warning" circle>!</NButton>
    <NButton type="danger" circle>删</NButton>
  </div>
</template>

禁用状态 ​

设置 disabled 属性来禁用按钮。

vue
<template>
  <div style="display: flex; gap: 12px; flex-wrap: wrap;">
    <NButton disabled>默认按钮</NButton>
    <NButton type="primary" disabled>主要按钮</NButton>
    <NButton type="success" disabled>成功按钮</NButton>
    <NButton type="warning" disabled>警告按钮</NButton>
    <NButton type="danger" disabled>危险按钮</NButton>
    <NButton type="info" disabled>信息按钮</NButton>
  </div>
</template>

加载中 ​

设置 loading 属性来显示加载状态。

vue
<template>
  <div style="display: flex; gap: 12px; flex-wrap: wrap;">
    <NButton loading>加载中</NButton>
    <NButton type="primary" loading>加载中</NButton>
  </div>
</template>

按钮尺寸 ​

使用 size 属性来设置按钮大小。

vue
<template>
  <div style="display: flex; gap: 12px; align-items: center;">
    <NButton size="large">大型按钮</NButton>
    <NButton>默认按钮</NButton>
    <NButton size="small">小型按钮</NButton>
  </div>
</template>

块级按钮 ​

设置 block 属性可以让按钮占据父容器的全部宽度。

vue
<template>
  <div style="width: 300px;">
    <NButton type="primary" block>块级按钮</NButton>
  </div>
</template>

文字按钮 ​

设置 text 属性可以得到文字按钮。

vue
<template>
  <div style="display: flex; gap: 12px;">
    <NButton text>文字按钮</NButton>
    <NButton type="primary" text>主要文字</NButton>
    <NButton type="success" text>成功文字</NButton>
  </div>
</template>

带背景色的按钮 ​

设置 bg 属性可以让按钮在朴素模式下也有背景色。

vue
<template>
  <div style="display: flex; gap: 12px; flex-wrap: wrap;">
    <NButton type="primary" plain bg>主要按钮</NButton>
    <NButton type="success" plain bg>成功按钮</NButton>
    <NButton type="warning" plain bg>警告按钮</NButton>
    <NButton type="danger" plain bg>危险按钮</NButton>
  </div>
</template>

按钮类型 ​

使用 nativeType 属性来设置按钮的原生类型。

vue
<template>
  <div style="display: flex; gap: 12px;">
    <NButton nativeType="button">Button</NButton>
    <NButton nativeType="submit">Submit</NButton>
    <NButton nativeType="reset">Reset</NButton>
  </div>
</template>

API ​

Props ​

属性说明类型默认值
type按钮类型'primary' | 'success' | 'warning' | 'danger' | 'info' | ''''
size按钮尺寸'large' | 'default' | 'small''default'
plain是否为朴素按钮booleanfalse
round是否为圆角按钮booleanfalse
circle是否为圆形按钮booleanfalse
disabled是否禁用booleanfalse
loading是否加载中booleanfalse
block是否为块级按钮booleanfalse
text是否为文字按钮booleanfalse
bg朴素按钮是否有背景色booleanfalse
icon图标组件Component—
nativeType原生类型'button' | 'submit' | 'reset''button'

Events ​

事件名说明类型
click点击事件(event: MouseEvent) => void

Slots ​

插槽名说明
default按钮内容
icon图标内容