TUI

<template>
  <div class="component-card-demo-wrap">
    <TsTag>默认</TsTag>
    <TsTag type="primary">主要</TsTag>
    <TsTag type="warning">警告</TsTag>
    <TsTag type="success">成功</TsTag>
    <TsTag type="error">错误</TsTag>
  </div>
</template>

<script setup lang="ts">
import { TsTag } from 'tui';
</script>

<template>
  <div class="component-card-demo-wrap-center">
    <TsTag size="mini">超小标签</TsTag>
    <TsTag size="small">小标签</TsTag>
    <TsTag size="medium">中等标签</TsTag>
    <TsTag size="large">大标签</TsTag>
  </div>
</template>

<script setup lang="ts">
import { TsTag } from 'tui';
</script>

<template>
  <div class="component-card-demo-wrap-center">
    <TsTag @click="() => {}">可交互效果</TsTag>
  </div>
</template>

<script setup lang="ts">
import { TsTag } from 'tui';
</script>

<template>
  <div>
    <div style="margin-bottom: 12px">
      <TsButton @click="handleAddCloseTag">增加可关闭标签</TsButton>
    </div>
    <div class="component-card-demo-wrap-center">
      <TsTag closeable @close="handleCloseTag(index)" v-for="(item, index) in closeTagList" :key="index">可关闭标签{{ item.key }}</TsTag>
    </div>
  </div>
</template>

<script setup lang="ts">
import { TsTag, TsButton } from 'tui';
import { ref } from 'vue';

const closeTagList = ref<{ key: number }[]>([{ key: 0 }]);

const handleAddCloseTag = () => {
  closeTagList.value.push({ key: closeTagList.value.length ? closeTagList.value[closeTagList.value.length - 1].key + 1 : 0 });
};

const handleCloseTag = (index: number) => {
  closeTagList.value.splice(index, 1);
};
</script>

<template>
  <div class="component-card-demo-wrap">
    <TsTag color="#1890ff" bg="#e6f7ff">自定义颜色</TsTag>
  </div>
</template>

<script setup lang="ts">
import { TsTag } from 'tui';
</script>