button按钮

常用的操作按钮

基础用法

使用type设置按钮颜色

<vt-button size="medium" type="primary">
  primary
</vt-button>
<vt-button size="medium" type="success">
  success
</vt-button>
<vt-button size="medium" type="danger">
  danger
</vt-button>
<vt-button size="medium" type="warning">
  warning
</vt-button>
<vt-button size="medium" type="info">
  info
</vt-button>

使用size设置按钮大小

<vt-button size="small" type="primary">
  small
</vt-button>
<vt-button size="medium" type="primary">
  medium
</vt-button>
<vt-button size="large" type="primary">
  large
</vt-button>

使用round设置圆角

<vt-button size="medium" type="primary" :round="true">
  primary
</vt-button>

禁用状态

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

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

图标按钮

使用Placement控制图标展示位置，在插槽中设置需要展示的图标

<script setup lang="ts">
import { AddCircle } from '@vicons/ionicons5';
</script>
<vt-button size="medium" type="danger" :round="true" icon-placement="left">left
  <template #icon>
    <vt-icon>
      <add-circle></add-circle>
    </vt-icon>
  </template>
</vt-button>

<vt-button size="medium" type="danger" :round="true" icon-placement="right">right
  <template #icon>
    <vt-icon>
      <add-circle></add-circle>
    </vt-icon>
  </template>
</vt-button>

加载状态按钮

通过设置 loading 属性为 true 来显示加载中状态

<vt-button 
  size="medium" 
  type="danger" 
  :round="true" 
  icon-placement="left" 
  :loading="true"
>
  left
</vt-button>

Button API

Button属性

名称	类型	默认值	说明
type	string	-	类型
size	string	-	尺寸
iconPlacement	string	-	图标展示位置
loading	boolean	false	是否加载
disabled	boolean	false	禁止状态
round	boolean	false	是否圆角