ETU组件库

Appearance

Return to top
On this page

Tag 标签

用于标记和选择。

基础用法

由 type 属性来选择 tag 的类型。

Tag1Tag2Tag3Tag4Tag5
<template>
  <EtuTag type="primary">Tag1</EtuTag>
  <EtuTag class="ml-2" type="success">Tag2</EtuTag>
  <EtuTag class="ml-2" type="info">Tag3</EtuTag>
  <EtuTag class="ml-2" type="warning">Tag4</EtuTag>
  <EtuTag class="ml-2" type="danger">Tag5</EtuTag>
</template>

<style>
.ml-2 {
  margin-left: 0.5rem;
}
</style>

<template>
  <EtuTag type="primary">Tag1</EtuTag>
  <EtuTag class="ml-2" type="success">Tag2</EtuTag>
  <EtuTag class="ml-2" type="info">Tag3</EtuTag>
  <EtuTag class="ml-2" type="warning">Tag4</EtuTag>
  <EtuTag class="ml-2" type="danger">Tag5</EtuTag>
</template>

<style>
.ml-2 {
  margin-left: 0.5rem;
}
</style>

可移除标签

设置 closable 属性可以定义一个标签是否可移除。 它接受一个 Boolean , 当 Tag 被移除时会触发 close 事件

Tag1Tag2Tag3Tag4Tag5

<template>
  <EtuTag type="primary" closable>Tag1</EtuTag>
  <EtuTag class="ml-2" type="success" closable>Tag2</EtuTag>
  <EtuTag class="ml-2" type="info" closable>Tag3</EtuTag>
  <EtuTag class="ml-2" type="warning" closable>Tag4</EtuTag>
  <EtuTag class="ml-2" type="danger" closable>Tag5</EtuTag>
</template>

<template>
  <EtuTag type="primary" closable>Tag1</EtuTag>
  <EtuTag class="ml-2" type="success" closable>Tag2</EtuTag>
  <EtuTag class="ml-2" type="info" closable>Tag3</EtuTag>
  <EtuTag class="ml-2" type="warning" closable>Tag4</EtuTag>
  <EtuTag class="ml-2" type="danger" closable>Tag5</EtuTag>
</template>

不同尺寸

使用 size 属性来设置额外尺寸, 可选值包括 large, default 或 small.

Tag1Tag2Tag3Tag1Tag2Tag3
<template>
  <EtuTag type="primary" size="small">Tag1</EtuTag>
  <EtuTag class="ml-2" type="primary" size="middle">Tag2</EtuTag>
  <EtuTag class="ml-2" type="primary" size="large">Tag3</EtuTag>
  <EtuTag class="ml-2" type="primary" size="small" closable>Tag1</EtuTag>
  <EtuTag class="ml-2" type="primary" size="middle" closable>Tag2</EtuTag>
  <EtuTag class="ml-2" type="primary" size="large" closable>Tag3</EtuTag>
</template>

<template>
  <EtuTag type="primary" size="small">Tag1</EtuTag>
  <EtuTag class="ml-2" type="primary" size="middle">Tag2</EtuTag>
  <EtuTag class="ml-2" type="primary" size="large">Tag3</EtuTag>
  <EtuTag class="ml-2" type="primary" size="small" closable>Tag1</EtuTag>
  <EtuTag class="ml-2" type="primary" size="middle" closable>Tag2</EtuTag>
  <EtuTag class="ml-2" type="primary" size="large" closable>Tag3</EtuTag>
</template>

主题

Tag 组件提供了三个不同的主题：dark、light 和 plain

通过设置 effect 属性来改变主题，默认为 light

DarkTag1Tag2Tag3Tag4Tag5Tag1Tag2Tag3Tag4Tag5

LightTag1Tag2Tag3Tag4Tag5Tag1Tag2Tag3Tag4Tag5

PlainTag1Tag2Tag3Tag4Tag5Tag1Tag2Tag3Tag4Tag5
<template>
  <span>Dark</span>
  <EtuTag class="ml-2" type="primary" effect="dark">Tag1</EtuTag>
  <EtuTag class="ml-2" type="success" effect="dark">Tag2</EtuTag>
  <EtuTag class="ml-2" type="info" effect="dark">Tag3</EtuTag>
  <EtuTag class="ml-2" type="warning" effect="dark">Tag4</EtuTag>
  <EtuTag class="ml-2" type="danger" effect="dark">Tag5</EtuTag>
  <EtuTag class="ml-2" type="primary" closable effect="dark">Tag1</EtuTag>
  <EtuTag class="ml-2" type="success" closable effect="dark">Tag2</EtuTag>
  <EtuTag class="ml-2" type="info" closable effect="dark">Tag3</EtuTag>
  <EtuTag class="ml-2" type="warning" closable effect="dark">Tag4</EtuTag>
  <EtuTag class="ml-2" type="danger" closable effect="dark">Tag5</EtuTag>
  <br />
  <br />
  <span>Light</span>
  <EtuTag class="ml-2" type="primary">Tag1</EtuTag>
  <EtuTag class="ml-2" type="success">Tag2</EtuTag>
  <EtuTag class="ml-2" type="info">Tag3</EtuTag>
  <EtuTag class="ml-2" type="warning">Tag4</EtuTag>
  <EtuTag class="ml-2" type="danger">Tag5</EtuTag>
  <EtuTag class="ml-2" type="primary" closable>Tag1</EtuTag>
  <EtuTag class="ml-2" type="success" closable>Tag2</EtuTag>
  <EtuTag class="ml-2" type="info" closable>Tag3</EtuTag>
  <EtuTag class="ml-2" type="warning" closable>Tag4</EtuTag>
  <EtuTag class="ml-2" type="danger" closable>Tag5</EtuTag>
  <br />
  <br />
  <span>Plain</span>
  <EtuTag class="ml-2" type="primary" effect="plain">Tag1</EtuTag>
  <EtuTag class="ml-2" type="success" effect="plain">Tag2</EtuTag>
  <EtuTag class="ml-2" type="info" effect="plain">Tag3</EtuTag>
  <EtuTag class="ml-2" type="warning" effect="plain">Tag4</EtuTag>
  <EtuTag class="ml-2" type="danger" effect="plain">Tag5</EtuTag>
  <EtuTag class="ml-2" type="primary" closable effect="plain">Tag1</EtuTag>
  <EtuTag class="ml-2" type="success" closable effect="plain">Tag2</EtuTag>
  <EtuTag class="ml-2" type="info" closable effect="plain">Tag3</EtuTag>
  <EtuTag class="ml-2" type="warning" closable effect="plain">Tag4</EtuTag>
  <EtuTag class="ml-2" type="danger" closable effect="plain">Tag5</EtuTag>
</template>

<template>
  <span>Dark</span>
  <EtuTag class="ml-2" type="primary" effect="dark">Tag1</EtuTag>
  <EtuTag class="ml-2" type="success" effect="dark">Tag2</EtuTag>
  <EtuTag class="ml-2" type="info" effect="dark">Tag3</EtuTag>
  <EtuTag class="ml-2" type="warning" effect="dark">Tag4</EtuTag>
  <EtuTag class="ml-2" type="danger" effect="dark">Tag5</EtuTag>
  <EtuTag class="ml-2" type="primary" closable effect="dark">Tag1</EtuTag>
  <EtuTag class="ml-2" type="success" closable effect="dark">Tag2</EtuTag>
  <EtuTag class="ml-2" type="info" closable effect="dark">Tag3</EtuTag>
  <EtuTag class="ml-2" type="warning" closable effect="dark">Tag4</EtuTag>
  <EtuTag class="ml-2" type="danger" closable effect="dark">Tag5</EtuTag>
  <br />
  <br />
  <span>Light</span>
  <EtuTag class="ml-2" type="primary">Tag1</EtuTag>
  <EtuTag class="ml-2" type="success">Tag2</EtuTag>
  <EtuTag class="ml-2" type="info">Tag3</EtuTag>
  <EtuTag class="ml-2" type="warning">Tag4</EtuTag>
  <EtuTag class="ml-2" type="danger">Tag5</EtuTag>
  <EtuTag class="ml-2" type="primary" closable>Tag1</EtuTag>
  <EtuTag class="ml-2" type="success" closable>Tag2</EtuTag>
  <EtuTag class="ml-2" type="info" closable>Tag3</EtuTag>
  <EtuTag class="ml-2" type="warning" closable>Tag4</EtuTag>
  <EtuTag class="ml-2" type="danger" closable>Tag5</EtuTag>
  <br />
  <br />
  <span>Plain</span>
  <EtuTag class="ml-2" type="primary" effect="plain">Tag1</EtuTag>
  <EtuTag class="ml-2" type="success" effect="plain">Tag2</EtuTag>
  <EtuTag class="ml-2" type="info" effect="plain">Tag3</EtuTag>
  <EtuTag class="ml-2" type="warning" effect="plain">Tag4</EtuTag>
  <EtuTag class="ml-2" type="danger" effect="plain">Tag5</EtuTag>
  <EtuTag class="ml-2" type="primary" closable effect="plain">Tag1</EtuTag>
  <EtuTag class="ml-2" type="success" closable effect="plain">Tag2</EtuTag>
  <EtuTag class="ml-2" type="info" closable effect="plain">Tag3</EtuTag>
  <EtuTag class="ml-2" type="warning" closable effect="plain">Tag4</EtuTag>
  <EtuTag class="ml-2" type="danger" closable effect="plain">Tag5</EtuTag>
</template>

圆形标签

变为完全圆形,使用round设置

Tag1Tag2Tag3Tag4Tag5
<template>
  <EtuTag type="primary" round>Tag1</EtuTag>
  <EtuTag class="ml-2" type="success" round>Tag2</EtuTag>
  <EtuTag class="ml-2" type="info" round>Tag3</EtuTag>
  <EtuTag class="ml-2" type="warning" round>Tag4</EtuTag>
  <EtuTag class="ml-2" type="danger" round>Tag5</EtuTag>
</template>

<template>
  <EtuTag type="primary" round>Tag1</EtuTag>
  <EtuTag class="ml-2" type="success" round>Tag2</EtuTag>
  <EtuTag class="ml-2" type="info" round>Tag3</EtuTag>
  <EtuTag class="ml-2" type="warning" round>Tag4</EtuTag>
  <EtuTag class="ml-2" type="danger" round>Tag5</EtuTag>
</template>

Tag属性

属性名说明类型可选值默认值
type类型stringsuccess/info/warning/danger—
closable是否可关闭boolean—false
size尺寸stringlarge / default /smalldefault
effect主题stringdark / light / plainlight
roundTag 是否为圆形boolean—false

Tag事件

事件名说明参数
click点击 Tag 时触发的事件—
close关闭 Tag 时触发的事件—

Tag插槽

名称说明
—自定义默认内容