iDesign

Tag 标签

标签常用于标记、分类和选择

基本用法

标签组件可直接展示包裹的内容，也可通过 <a> 或 <router-link> 来嵌套标签组件作为超链接标签使用。

普通标签
超链接标签一
超链接标签二
<template>
  <div class="idesign-demo-block-row">
    <i-tag>普通标签</i-tag>

    <a
      href="https://idesign-vue.leophen.cn/"
      target="_blank"
      rel="noreferrer"
    >
      <i-tag>超链接标签一</i-tag>
    </a>

    <router-link to="/components/button/button">
      <i-tag>超链接标签二</i-tag>
    </router-link>
  </div>
</template>
显示代码

不同样式的标签

Tag 组件提供了五种不同的颜色类型：default（默认）、primary、success、warning 和 error。

除此之外，可以通过 theme 属性来改变主题：light（默认）、dark。

标签一
标签二
标签三
标签四
标签五
标签一
标签二
标签三
标签四
标签五
<template>
  <div class="idesign-demo-block-column">
    <div class="idesign-demo-block-row">
      <i-tag type="default">标签一</i-tag>
      <i-tag type="primary">标签二</i-tag>
      <i-tag type="success">标签三</i-tag>
      <i-tag type="warning">标签四</i-tag>
      <i-tag type="error">标签五</i-tag>
    </div>
    <div class="idesign-demo-block-row">
      <i-tag type="default" theme="dark">标签一</i-tag>
      <i-tag type="primary" theme="dark">标签二</i-tag>
      <i-tag type="success" theme="dark">标签三</i-tag>
      <i-tag type="warning" theme="dark">标签四</i-tag>
      <i-tag type="error" theme="dark">标签五</i-tag>
    </div>
  </div>
</template>
显示代码

带图标的标签

Tag 组件提供了 icon 属性来嵌入内置图标（点击查看内置图标集合），也可以通过插槽的方式嵌入自定义图标。

标签一
标签二 
<template>
  <div class="idesign-demo-block-row">
    <i-tag icon="TagPrice">标签一</i-tag>
    <i-tag>
      <i-icon name="TagCollection" :size="14" />标签二
    </i-tag>
  </div>
</template>
显示代码

带添加和删除按钮的标签

当添加 addable 或 closeable 属性时，会自动带上添加或删除按钮，可通过 @add 和 @close 单独触发点击的事件。

标签一
标签二
标签三
标签四
标签一
标签二
标签三
标签四
标签一
标签二
标签三
标签四 
<template>
  <div class="idesign-demo-block-column">
    <div class="idesign-demo-block-row">
      <i-tag addable @add="handleAdd">标签一</i-tag>
      <i-tag icon="TagPrice" addable @add="handleAdd">标签二</i-tag>
      <i-tag closeable @close="handleClose">标签三</i-tag>
      <i-tag icon="TagPrice" closeable @close="handleClose">标签四</i-tag>
    </div>
    <div class="idesign-demo-block-row">
      <i-tag type="primary" addable @add="handleAdd">标签一</i-tag>
      <i-tag type="primary" icon="TagPrice" addable @add="handleAdd">标签二</i-tag>
      <i-tag type="primary" closeable @close="handleClose">标签三</i-tag>
      <i-tag type="primary" icon="TagPrice" closeable @close="handleClose">
        标签四
      </i-tag>
    </div>
    <div class="idesign-demo-block-row">
      <i-tag type="primary" theme="dark" addable @add="handleAdd">标签一</i-tag>
      <i-tag type="primary" theme="dark" icon="TagPrice" addable @add="handleAdd">
        标签二
      </i-tag>
      <i-tag type="primary" theme="dark" closeable @close="handleClose">标签三</i-tag>
      <i-tag type="primary" theme="dark" icon="TagPrice" @click="handleAdd" closeable @close="handleClose">
        标签四
      </i-tag>
    </div>
  </div>
</template>

<script setup>
const handleAdd = () => {
  alert('add')
}

const handleClose = () => {
  alert('close')
}
</script>
显示代码

不同尺寸的标签

Tag 组件提供了三种不同的尺寸：small、medium（默认）和 large。

标签一
标签二
标签三
标签一
标签二
标签三
标签一
标签二
标签三
标签一
标签二
标签三
<template>
  <div class="idesign-demo-block-column">
    <div class="idesign-demo-block-row">
      <i-tag size="small">标签一</i-tag>
      <i-tag size="medium">标签二</i-tag>
      <i-tag size="large">标签三</i-tag>
    </div>
    <div class="idesign-demo-block-row">
      <i-tag size="small" icon="TagPrice">标签一</i-tag>
      <i-tag size="medium" icon="TagPrice">标签二</i-tag>
      <i-tag size="large" icon="TagPrice">标签三</i-tag>
    </div>
    <div class="idesign-demo-block-row">
      <i-tag size="small" addable>标签一</i-tag>
      <i-tag size="medium" addable>标签二</i-tag>
      <i-tag size="large" addable>标签三</i-tag>
    </div>
    <div class="idesign-demo-block-row">
      <i-tag size="small" closeable>标签一</i-tag>
      <i-tag size="medium" closeable>标签二</i-tag>
      <i-tag size="large" closeable>标签三</i-tag>
    </div>
  </div>
</template>
显示代码

自定义最大宽度

通过 maxWidth 设置最大宽度，超出部分自动省略。

超长文本标签超长省略文本标签
超长文本标签超长省略文本标签
超长文本标签超长省略文本标签
超长文本标签超长省略文本标签
超长文本标签超长省略文本标签
超长文本标签超长省略文本标签
<template>
  <div class="idesign-demo-block-column">
    <div class="idesign-demo-block-row">
      <i-tag size="small">超长文本标签超长省略文本标签</i-tag>
      <i-tag size="small" :maxWidth="150">超长文本标签超长省略文本标签</i-tag>
    </div>
    <div class="idesign-demo-block-row">
      <i-tag>超长文本标签超长省略文本标签</i-tag>
      <i-tag :maxWidth="150">超长文本标签超长省略文本标签</i-tag>
    </div>
    <div class="idesign-demo-block-row">
      <i-tag size="large">超长文本标签超长省略文本标签</i-tag>
      <i-tag size="large" :maxWidth="150">超长文本标签超长省略文本标签</i-tag>
    </div>
  </div>
</template>
显示代码

Tag Attributes

属性说明类型默认值
icon标签中的图标，可自定义图标呈现string--
addable显示添加图标booleanfalse
closeable显示关闭图标booleanfalse
maxWidth标签最大宽度，超出部分渐变省略。示例：'50px' / 80string〡number--
size标签尺寸"small"〡"medium"〡"large"medium
theme标签主题"light"〡"dark"dark
type标签类型，用于描述组件不同的应用场景"default"〡"primary"〡"warning"〡"error"〡"success"default

Tag Events

属性说明类型默认值
click点击标签时触发(e: MouseEvent) => void--
add显示添加图标时点击触发(e: MouseEvent) => void--
close显示关闭图标时点击触发(e: MouseEvent) => void--
Last Updated:
Contributors: Leophen