ETU组件库

Appearance

Return to top
On this page

Button 标签

用于按钮

基础用法

由 type 属性来选择 Button 的类型。我们可以指定type=""来指定type的类型，我们内置了default,primary,success,warning,Info,rainbow,danger不同的属性。

<template>
  <etu-button>default</etu-button>
  <etu-button type="default">default</etu-button>
  <etu-button type="primary">primary</etu-button>
  <etu-button type="success">success</etu-button>
  <etu-button type="Info">Info</etu-button>
  <etu-button type="warning">warning</etu-button>
  <etu-button type="danger">danger</etu-button>
  <etu-button type="rainbow">rainbow</etu-button>
</template>
<script setup lang="ts"></script>
<template>
  <etu-button>default</etu-button>
  <etu-button type="default">default</etu-button>
  <etu-button type="primary">primary</etu-button>
  <etu-button type="success">success</etu-button>
  <etu-button type="Info">Info</etu-button>
  <etu-button type="warning">warning</etu-button>
  <etu-button type="danger">danger</etu-button>
  <etu-button type="rainbow">rainbow</etu-button>
</template>
<script setup lang="ts"></script>

按钮的Hollow

由 Hollow属性来决定按钮是由实到虚，还是由虚到实，提供了两个值供选择:solid和Hollow,分别对应实心，空心, 默认实心。

<template>
  <etu-button Hollow="Hollow">按钮</etu-button>
  <etu-button type="primary" Hollow="Hollow">按钮</etu-button>
  <etu-button type="success" Hollow="Hollow">按钮</etu-button>
  <etu-button type="Info" Hollow="Hollow">按钮</etu-button>
  <etu-button type="warning" Hollow="Hollow">按钮</etu-button>
  <etu-button type="danger" Hollow="Hollow">按钮</etu-button>
  <etu-button type="rainbow" Hollow="Hollow">按钮</etu-button>
</template>
<script setup lang="ts"></script>
<template>
  <etu-button Hollow="Hollow">按钮</etu-button>
  <etu-button type="primary" Hollow="Hollow">按钮</etu-button>
  <etu-button type="success" Hollow="Hollow">按钮</etu-button>
  <etu-button type="Info" Hollow="Hollow">按钮</etu-button>
  <etu-button type="warning" Hollow="Hollow">按钮</etu-button>
  <etu-button type="danger" Hollow="Hollow">按钮</etu-button>
  <etu-button type="rainbow" Hollow="Hollow">按钮</etu-button>
</template>
<script setup lang="ts"></script>

按钮的曲度

由 Curvature属性来决定按钮边框曲度大小，提供了两个值供选择:Microcurvature和curved,分别对应微曲和大曲度，默认微曲。

<template>
  <etu-button Curvature="curved">default</etu-button>
  <etu-button type="default" Curvature="curved">default</etu-button>
  <etu-button type="primary" Curvature="curved">primary</etu-button>
  <etu-button type="success" Curvature="curved">success</etu-button>
  <etu-button type="Info" Curvature="curved">Info</etu-button>
  <etu-button type="warning" Curvature="curved">warning</etu-button>
  <etu-button type="danger" Curvature="curved">danger</etu-button>
  <etu-button type="rainbow" Curvature="curved">rainbow</etu-button>
</template>
<script setup lang="ts"></script>
<template>
  <etu-button Curvature="curved">default</etu-button>
  <etu-button type="default" Curvature="curved">default</etu-button>
  <etu-button type="primary" Curvature="curved">primary</etu-button>
  <etu-button type="success" Curvature="curved">success</etu-button>
  <etu-button type="Info" Curvature="curved">Info</etu-button>
  <etu-button type="warning" Curvature="curved">warning</etu-button>
  <etu-button type="danger" Curvature="curved">danger</etu-button>
  <etu-button type="rainbow" Curvature="curved">rainbow</etu-button>
</template>
<script setup lang="ts"></script>

圆按钮

由circle属性决定按钮是否为圆形，提供了两个值供选择true,false。默认为false。

<template>
  <etu-button type="default" circle="true">c</etu-button>
  <etu-button type="primary" circle="true">c</etu-button>
  <etu-button type="success" circle="true">c</etu-button>
  <etu-button type="Info" circle="true">c</etu-button>
</template>
<script setup lang="ts"></script>

<template>
  <etu-button type="default" circle="true">c</etu-button>
  <etu-button type="primary" circle="true">c</etu-button>
  <etu-button type="success" circle="true">c</etu-button>
  <etu-button type="Info" circle="true">c</etu-button>
</template>
<script setup lang="ts"></script>

按钮尺寸

由size属性来决定按钮尺寸大小，提供了small,normal,large三个选项，默认为normal。

<template>
  <etu-button size="small">small</etu-button>
  <etu-button size="normal">normal</etu-button>
  <etu-button size="large">large</etu-button>
</template>
<script setup lang="ts"></script>
<template>
  <etu-button size="small">small</etu-button>
  <etu-button size="normal">normal</etu-button>
  <etu-button size="large">large</etu-button>
</template>
<script setup lang="ts"></script>

按钮禁用

由disabled属性决定按钮是否被禁用，提供了两个值供选择true,false。默认为false。

<template>
  <etu-button @click="demoFun">default</etu-button>
  <etu-button type="default" disabled="true" @click="demoFun">default</etu-button>
  <etu-button type="primary" disabled="true" @click="demoFun">primary</etu-button>
  <etu-button type="success" disabled="true" @click="demoFun">success</etu-button>
  <etu-button type="Info" disabled="true" @click="demoFun">Info</etu-button>
  <etu-button type="warning" disabled="true" @click="demoFun">warning</etu-button>
  <etu-button type="danger" disabled="true" @click="demoFun">danger</etu-button>
  <etu-button type="rainbow" disabled="true" @click="demoFun">rainbow</etu-button>
</template>
<script setup lang="ts">
function demoFun() {
  console.log("没有设置禁用，事件触发了");
}
</script>
<template>
  <etu-button @click="demoFun">default</etu-button>
  <etu-button type="default" disabled="true" @click="demoFun">default</etu-button>
  <etu-button type="primary" disabled="true" @click="demoFun">primary</etu-button>
  <etu-button type="success" disabled="true" @click="demoFun">success</etu-button>
  <etu-button type="Info" disabled="true" @click="demoFun">Info</etu-button>
  <etu-button type="warning" disabled="true" @click="demoFun">warning</etu-button>
  <etu-button type="danger" disabled="true" @click="demoFun">danger</etu-button>
  <etu-button type="rainbow" disabled="true" @click="demoFun">rainbow</etu-button>
</template>
<script setup lang="ts">
function demoFun() {
  console.log("没有设置禁用，事件触发了");
}
</script>
属性名值描述
typedefault,primary,Info,danger,warnning,rainbow分别对应默认，主要按钮，灰色按钮，危险按钮，警告按钮,彩虹按钮
Hollowsolid,Hollow由实到虚，还是由虚到实 ，默认由实到虚
CurvatureMicrocurvature , curved微曲和大曲度，默认微曲
circletrue , false指定按钮是否为圆，默认false
sizelarge , normal , small按钮尺寸的大中小，默认是normal
disabledtrue , false按钮状态是否禁用，默认为false,不禁用

Button事件 

<template>
  <etu-button @click="demoFun">default</etu-button>
</template>
<script setup lang="ts">
function demoFun() {
  console.log("没有设置禁用，事件触发了");
}
</script>
<template>
  <etu-button @click="demoFun">default</etu-button>
</template>
<script setup lang="ts">
function demoFun() {
  console.log("没有设置禁用，事件触发了");
}
</script>
事件名说明参数
click点击 Button 时触发的事件—

Button插槽 

<template>
  <etu-button Hollow="Hollow"><etu-icon class="close_Icon"></etu-icon>按钮</etu-button>
</template>
<script setup lang="ts"></script>
<template>
  <etu-button Hollow="Hollow"><etu-icon class="close_Icon"></etu-icon>按钮</etu-button>
</template>
<script setup lang="ts"></script>
名称说明
—自定义默认内容