Button

常用的操作按钮。

主要按钮

查看代码

<template>
  <e-button>Default</e-button>
  <e-button type="primary">Primary</e-button>
  <e-button type="success">Success</e-button>
  <e-button type="info">Info</e-button>
  <e-button type="warning">Warning</e-button>
  <e-button type="danger">danger</e-button>
</template>

次要按钮

查看代码

<template>
  <e-button plain>Default</e-button>
  <e-button type="primary" plain>Primary</e-button>
  <e-button type="success" plain>Success</e-button>
  <e-button type="info" plain>Info</e-button>
  <e-button type="warning" plain>Warning</e-button>
  <e-button type="danger" plain>danger</e-button>
</template>

文字按钮

查看代码

<template>
  <e-button text>Default</e-button>
  <e-button type="primary" text>Primary</e-button>
  <e-button type="success" text>Success</e-button>
  <e-button type="info" text>Info</e-button>
  <e-button type="warning" text>Warning</e-button>
  <e-button type="danger" text>danger</e-button>
</template>

圆角按钮

查看代码

<template>
  <e-button round>Default</e-button>
  <e-button type="primary" round>Primary</e-button>
  <e-button type="success" round>Success</e-button>
  <e-button type="info" round>Info</e-button>
  <e-button type="warning" round>Warning</e-button>
  <e-button type="danger" round>danger</e-button>
</template>

圆形按钮

查看代码

<template>
  <e-button circle><IconDelete /></e-button>
  <e-button type="primary" circle><IconDelete /></e-button>
  <e-button type="success" circle><IconDelete /></e-button>
  <e-button type="info" circle><IconDelete /></e-button>
  <e-button type="warning" circle><IconDelete /></e-button>
  <e-button type="danger" circle><IconDelete /></e-button>
  <br />
  <br />
</template>

<script setup lang="ts">
import { IconDelete } from 'elin-ui'
</script>

图标按钮

直接将图标插入到文字的前面或者后面即可

查看代码

<template>
  <e-button type="primary"><IconPlus />新建</e-button>
  <e-button type="warning"><IconEdit />编辑</e-button>
  <e-button type="danger"><IconDelete />删除</e-button>
  <br />
  <br />
  <e-button type="primary">新建<IconPlus /></e-button>
  <e-button type="warning">编辑<IconEdit /></e-button>
  <e-button type="danger">删除<IconDelete /></e-button>
</template>

<script setup lang="ts">
import { IconPlus, IconDelete, IconEdit } from 'elin-ui'
</script>

不同大小

查看代码

<template>
  <e-button size="large">Large</e-button>
  <e-button size="default">Default</e-button>
  <e-button size="small">Small</e-button>
</template>

不同点击效果

查看代码

<template>
  <e-button type="primary" click-effect="water">水波纹</e-button>
  <e-button type="primary" click-effect="zoom">弹性</e-button>
</template>

禁用状态

查看代码

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

加载状态

查看代码

<template>
  <e-button type="primary" loading> Loading</e-button>
</template>

API

defineProps

属性名	说明	类型	默认值
type	颜色类型	enum	无
size	按钮大小	enum	'default'
plain	是否为次要按钮	boolean	false
text	是否为文字按钮	boolean	false
round	是否为圆角按钮	boolean	false
circle	是否为圆形按钮	boolean	false
loading	是否加载中状态	boolean	false
clickEffect	点击动画	enum	'water'

defineEmits

属性名	说明	类型
click	按钮点击事件	(event: Event) => void