Xu-Element

Appearance

Button 按钮 ​

常用的操作按钮。

基础用法 ​

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

<template>
  <p>
    <XuButton>Default</XuButton>
    <XuButton type="primary">
      Primary
    </XuButton>
    <XuButton type="success">
      Success
    </XuButton>
    <XuButton type="info">
      Info
    </XuButton>
    <XuButton type="warning">
      Warning
    </XuButton>
    <XuButton type="danger">
      Danger
    </XuButton>
  </p>
  <p>
    <XuButton plain>
      Plain
    </XuButton>
    <XuButton type="primary" plain>
      Primary
    </XuButton>
    <XuButton type="success" plain>
      Success
    </XuButton>
    <XuButton type="info" plain>
      Info
    </XuButton>
    <XuButton type="warning" plain>
      Warning
    </XuButton>
    <XuButton type="danger" plain>
      Danger
    </XuButton>
  </p>

  <p>
    <XuButton round>
      Round
    </XuButton>
    <XuButton type="primary" round>
      Primary
    </XuButton>
    <XuButton type="success" round>
      Success
    </XuButton>
    <XuButton type="info" round>
      Info
    </XuButton>
    <XuButton type="warning" round>
      Warning
    </XuButton>
    <XuButton type="danger" round>
      Danger
    </XuButton>
  </p>

  <p>
    <XuButton icon="search" circle />
    <XuButton type="primary" icon="edit" circle />
    <XuButton type="success" icon="check" circle />
    <XuButton type="info" icon="message" circle />
    <XuButton type="warning" icon="star" circle />
    <XuButton type="danger" icon="trash" circle />
  </p>
</template>

禁用状态 ​

你可以使用 disabled 属性来定义按钮是否被禁用。

使用 disabled 属性来控制按钮是否为禁用状态。 该属性接受一个 Boolean 类型的值。

<template>
  <p>
    <XuButton disabled>
      Default
    </XuButton>
    <XuButton type="primary" disabled>
      Primary
    </XuButton>
    <XuButton type="success" disabled>
      Success
    </XuButton>
    <XuButton type="info" disabled>
      Info
    </XuButton>
    <XuButton type="warning" disabled>
      Warning
    </XuButton>
    <XuButton type="danger" disabled>
      Danger
    </XuButton>
  </p>
</template>

图标按钮 ​

你可以在按钮中添加图标来增强按钮的可读性。

使用图标为按钮添加更多的含义。 你也可以单独使用图标不添加文字来节省显示区域占用。

使用 icon 属性来为按钮添加图标。 您可以在我们的 Icon 组件中找到所需图标。 通过向右方添加 &lt;i&gt; 标签来添加图标， 你也可以使用自定义图标。

<template>
  <p>
    <XuButton type="primary" icon="edit" />
    <XuButton type="primary" icon="heart" />
    <XuButton type="primary" icon="search">
      Search
    </XuButton>
  </p>
</template>

按钮组 ​

将多个按钮组合在一起，用于在同一操作下进行选择。

<template>
  <p>
    <XuButtonGroup>
      <XuButton type="primary" icon="edit" />
      <XuButton type="primary" icon="heart" />
      <XuButton type="primary" icon="search">
        Search
      </XuButton>
    </XuButtonGroup>
  </p>
  <p>
    <XuButtonGroup type="primary">
      <XuButton>上一页</XuButton>
      <XuButton>下一页</XuButton>
    </XuButtonGroup>
  </p>
</template>

​

Button API ​

Button Attributes ​

参数说明类型默认值
type按钮类型'primary' | 'danger' | 'info' | 'success' | 'warning'-
text按钮文本string-
size按钮尺寸'large' | 'default' | 'small''default'
plain是否为朴素按钮booleanfalse
round是否为圆角按钮booleanfalse
circle是否为圆形按钮booleanfalse
disabled是否禁用按钮booleanfalse
loading是否显示加载状态booleanfalse
tag自定义按钮标签string'button'
nativeType按钮原生类型'button' | 'submit' | 'reset''button'
icon按钮图标string-

Button Events ​

事件名说明回调参数
click点击按钮时触发(ev: MouseEvent)

Button Slots ​

插槽名说明
default按钮内容

Button Expose ​

方法名说明类型
ref按钮元素的引用Ref<HTMLButtonElement | void>

ButtonGroup Attributes ​

参数说明类型默认值
size按钮组尺寸'large' | 'default' | 'small'-
type按钮组类型'primary' | 'danger' | 'info' | 'success' | 'warning'-
disabled是否禁用按钮组booleanfalse