CreateUI

Appearance

Return to top
On this page

Button 按钮

基本用法

Button有颜色属性 type , 外形属性 circle 、 round , 可组合使用样式

<template>
  <div>
    <c-button>Default</c-button>
    <c-button type="primary">Primary</c-button>
    <c-button type="success">Success</c-button>
    <c-button type="info">Info</c-button>
    <c-button type="warning">Warning</c-button>
    <c-button type="danger">Danger</c-button>
  </div>
  <div>
    <c-button round>Default</c-button>
    <c-button type="primary" round>Primary</c-button>
    <c-button type="success" round>Success</c-button>
    <c-button type="info" round>Info</c-button>
    <c-button type="warning" round>Warning</c-button>
    <c-button type="danger" round>Danger</c-button>
  </div>
  <div>
    <c-button circle icon="ant-design:car-filled"></c-button>
    <c-button type="primary" circle icon="ant-design:car-filled"></c-button>
    <c-button type="success" circle icon="ant-design:car-filled"></c-button>
    <c-button type="info" circle icon="ant-design:car-filled"></c-button>
    <c-button type="warning" circle icon="ant-design:car-filled"></c-button>
    <c-button type="danger" circle icon="ant-design:car-filled"></c-button>
  </div>
</template>

<style lang="less" scoped>
div + div {
  margin-top: 12px;
}
</style>

禁用状态

你可以给Button传入 disabled 属性，值的类型为 Boolean ，来表示Button是否被禁用

<template>
  <div>
    <c-button disabled>Default</c-button>
    <c-button type="primary" disabled>Primary</c-button>
    <c-button type="success" disabled>Success</c-button>
    <c-button type="info" disabled>Info</c-button>
    <c-button type="warning" disabled>Warning</c-button>
    <c-button type="danger" disabled>Danger</c-button>
  </div>
</template>

Button尺寸

你可以选择传入 size 属性，有 small 和 large 两种尺寸可以选择。

<template>
  <div class="demo-row">
    <c-button type="primary" size="large">Large</c-button>
    <c-button type="primary">Default</c-button>
    <c-button type="primary" size="small">Small</c-button>
  </div>
  <div class="demo-row">
    <c-button type="primary" size="large" round>Large</c-button>
    <c-button type="primary" round>Default</c-button>
    <c-button type="primary" size="small" round>Small</c-button>
  </div>
</template>

Button API

Button属性

属性名说明类型默认值
sizeButton尺寸'large' | 'default' | 'small''dafault'
typeButton类型'primary' | 'default' | 'success' | 'warning' | 'danger' | 'info''default'
round是否为圆角按钮booleanfalse
circle是否为圆形按钮booleanfalse
disabled是否为禁用状态booleanfalse
icon图标名称string——

Button插槽

插槽名说明
defaultButton自定义内容
icon自定义图标