v-easy-components

# Button 按钮

常用的操作按钮。

# 基本用法

基本按钮用法。

使用 type ， plain ， round 和 circle 属性定义 Button的样式。
<template>
  <div>
    <ve-button plain>Plain button</ve-button>
    <ve-button plain type="success">Success button</ve-button>
    <ve-button plain type="primary">Main button</ve-button>
    <ve-button plain type="warning">Warning button</ve-button>
    <ve-button plain type="error">Danger button</ve-button>
  </div>
  <div style="margin-top: 12px">
    <ve-button type="success">Success button</ve-button>
    <ve-button type="primary">Main button</ve-button>
    <ve-button type="warning">Warning button</ve-button>
    <ve-button type="error">Danger button</ve-button>
  </div>
  <div style="margin-top: 12px">
    <ve-button icon="asterisk" circle></ve-button>
    <ve-button type="success" icon="circle" circle></ve-button>
    <ve-button type="primary" icon="shopping-cart" circle></ve-button>
    <ve-button type="warning" icon="table" circle></ve-button>
    <ve-button type="error" icon="compress" circle></ve-button>
  </div>
</template>

# 按钮尺寸

额外的尺寸：large、small，通过设置 size 属性来配置它们。
<template>
  <div>
    <ve-button size="small" type="success">Success small</ve-button>
    <ve-button size="small" type="primary">Main small</ve-button>
    <ve-button size="small" type="warning">Warning small</ve-button>
    <ve-button size="small" type="error">Danger small</ve-button>
  </div>
  <div style="margin-top: 12px">
    <ve-button type="success">Success default</ve-button>
    <ve-button type="primary">Main default</ve-button>
    <ve-button type="warning">Warning default</ve-button>
    <ve-button type="error">Danger default</ve-button>
  </div>
  <div style="margin-top: 12px">
    <ve-button size="large" type="success">Success large</ve-button>
    <ve-button size="large" type="primary">Main large</ve-button>
    <ve-button size="large" type="warning">Warning large</ve-button>
    <ve-button size="large" type="error">Danger large</ve-button>
  </div>
</template>

# 禁用状态

让按钮不可用

您可以使用 disabled 属性来定义按钮是否可用，该按钮接受 Boolean 值。
<template>
  <div>
    <ve-button plain disabled>Plain button</ve-button>
    <ve-button plain type="success" disabled>Success button</ve-button>
    <ve-button plain type="primary" disabled>Main button</ve-button>
    <ve-button plain type="warning" disabled>Warning button</ve-button>
    <ve-button plain type="error" disabled>Danger button</ve-button>
  </div>
  <div style="margin-top: 12px">
    <ve-button disabled>Normal button</ve-button>
    <ve-button type="success" disabled>Success button</ve-button>
    <ve-button type="primary" disabled>Main button</ve-button>
    <ve-button type="warning" disabled>Warning button</ve-button>
    <ve-button type="error" disabled>Danger button</ve-button>
  </div>
  <div style="margin-top: 12px">
    <ve-button icon="asterisk" circle disabled></ve-button>
    <ve-button type="success" icon="circle" circle disabled></ve-button>
    <ve-button type="primary" icon="shopping-cart" circle disabled></ve-button>
    <ve-button type="warning" icon="table" circle disabled></ve-button>
    <ve-button type="error" icon="compress" circle disabled></ve-button>
  </div>
</template>

# 按钮图标

使用 icon 属性定义 Button 的图标。 可用的图标地址
<template>
  <ve-button type="primary" icon="asterisk" rotate disabled>Button</ve-button>
  <ve-button type="primary" icon="circle"></ve-button>
  <ve-button type="primary" icon="shopping-cart"></ve-button>
  <ve-button type="primary" icon="compress"></ve-button>
</template>

# 文字按钮

将 type 属性的值更改为 text 。
<template>
  <ve-button type="text">Button</ve-button>
</template>

# 圆形按钮旋转

设置 rotate 的值。 注意：仅支持带有:circle ="true"的按钮
<template>
  <ve-button icon="asterisk" circle rotate></ve-button>
  <ve-button type="primary" icon="circle" rotate circle></ve-button>
</template>

# 按钮动画

首先设置 mask 为 true，然后再设置 mask-type 的值改变按钮动画风格
<template>
  <ve-button mask mask-type="primary">Main button</ve-button>
  <ve-button mask mask-type="success">Success button</ve-button>
  <ve-button mask mask-type="warning">Warning button</ve-button>
  <ve-button mask mask-type="error">Danger button</ve-button>
</template>

# 按钮属性

Parameter Description Type Optional value Defaults
type 按钮风格 string default / success / primary / warning / error default
native-type 原生type属性 string button / submit / reset button
icon 按钮图标 string fontawesome 5.6.3 None
disabled 是否禁用按钮 boolean true / false false
circle 是否为圆形按钮 boolean true / false false
plain 是否普通按钮 boolean true / false false
rotate 按钮是否旋转 boolean true / false false
mask 是否显示遮罩 boolean true / false false
mask-type 按钮遮罩类型 string success / primary / warning / error primary
icon-style 设置icon图标风格详情 string brands / regular / solid solid

# 按钮事件

Event name Event Description Callback parameter
click 鼠标点击事件 (event: Event)

← Input 输入框 →