TUI

<template>
  <TsTag>默认</TsTag>
  <TsTag type="valid">审核通过</TsTag>
  <TsTag type="freeze">已冻结</TsTag>
  <TsTag type="selected">选中</TsTag>
</template>

<template>
  <TsTag size="small">小标签</TsTag>
  <TsTag size="medium">中等标签</TsTag>
  <TsTag size="large">大标签</TsTag>
</template>

<template>
  <TsTag @click="() => {}">可交互效果</TsTag>
</template>

<template>
  <div style="margin-bottom: 12px">
    <TsButton @click="handleAddCloseTag">增加可关闭标签</TsButton>
  </div>
  <div class="item-flex-center-wrap">
    <TsTag closeable @close="handleCloseTag(index)" v-for="(item, index) in closeTagList" :key="index">关闭{{ item.key }}</TsTag>
  </div>
</template>
<script setup lang="ts">
  import { ref } from 'vue';

  interface MockTagItem {
    key: number;
  }

  const closeTagList = ref<MockTagItem[]>([{ 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>
  <TsTag type="original">默认</TsTag>
  <TsTag type="freeze">冻结</TsTag>
  <TsTag type="valid">有效</TsTag>
  <TsTag type="selected">选中</TsTag>
  <TsTag type="initial">初始</TsTag>
  <TsTag type="apply">申请中</TsTag>
  <TsTag type="draft">草稿</TsTag>
  <TsTag type="featured">推荐</TsTag>
  <TsTag type="pinned">置顶</TsTag>
  <TsTag color="#1890ff" bg="#e6f7ff">自定义颜色</TsTag>
</template>