X-Next

Appearance

Tag 标签 ​

用于标记状态、属性、分类或筛选条件，常见于列表、表格、详情页和筛选区域。

何时使用 ​

  • 标记对象的状态、分类、来源或属性。
  • 展示可关闭的筛选条件。
  • 用作轻量级的可选项，但不承载复杂表单交互。

基础用法 ​

默认标签蓝色标签绿色标签自定义颜色
vue
<template>
  <x-tag>默认标签</x-tag>
  <x-tag color="blue">蓝色标签</x-tag>
  <x-tag color="green">绿色标签</x-tag>
  <x-tag color="#0f766e">自定义颜色</x-tag>
</template>

内置颜色 ​

redorangeredorangegoldlimegreencyanbluebetter-bluepurplepink-purplemagentagray
vue
<template>
  <x-tag v-for="color in colors" :key="color" :color="color">
    {{ color }}
  </x-tag>
</template>

<script setup lang="ts">
const colors = [
  'red',
  'orangered',
  'orange',
  'gold',
  'lime',
  'green',
  'cyan',
  'blue',
  'better-blue',
  'purple',
  'pink-purple',
  'magenta',
  'gray',
];
</script>

尺寸 ​

小型标签中型标签大型标签
vue
<template>
  <x-tag size="small">小型标签</x-tag>
  <x-tag>中型标签</x-tag>
  <x-tag size="large">大型标签</x-tag>
</template>

带边框 ​

默认边框蓝色边框绿色边框品红边框
vue
<template>
  <x-tag bordered>默认边框</x-tag>
  <x-tag color="blue" bordered>蓝色边框</x-tag>
  <x-tag color="green" bordered>绿色边框</x-tag>
  <x-tag color="magenta" bordered>品红边框</x-tag>
</template>

可关闭 ​

可关闭
关闭事件
受控显示
vue
<template>
  <x-tag closable>可关闭</x-tag>
  <x-tag color="orange" closable @close="handleClose">关闭事件</x-tag>
  <x-tag v-model:visible="visible" color="purple" closable>受控显示</x-tag>
  <x-button size="mini" @click="visible = true">重置</x-button>
</template>

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

const visible = ref(true);

const handleClose = (event: MouseEvent) => {
  console.log('tag close', event);
};
</script>

可选择 ​

默认可选未选中受控选择当前：已选
vue
<template>
  <x-tag selectable>默认可选</x-tag>
  <x-tag color="red" selectable :default-checked="false">未选中</x-tag>
  <x-tag v-model:checked="checked" color="better-blue" selectable>受控选择</x-tag>
  <span>当前：{{ checked ? '已选' : '未选' }}</span>
</template>

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

const checked = ref(true);
</script>

加载中 ​

同步中
发布中
自定义颜色
vue
<template>
  <x-tag loading>同步中</x-tag>
  <x-tag color="blue" loading>发布中</x-tag>
  <x-tag color="#0f766e" loading>自定义颜色</x-tag>
</template>

图标与自定义关闭图标 ​

已完成 自定义关闭
vue
<template>
  <x-tag color="green">
    <template #icon>
      <span aria-hidden="true">✓</span>
    </template>
    已完成
  </x-tag>
  <x-tag color="orange" closable>
    <template #close-icon>
      <span aria-hidden="true">x</span>
    </template>
    自定义关闭
  </x-tag>
</template>

动态编辑 ​

Vue
TypeScript
VitePress
+ 新增
vue
<template>
  <x-tag v-for="tag in dynamicTags" :key="tag" closable @close="removeTag(tag)">
    {{ tag }}
  </x-tag>
  <x-input
    v-if="editing"
    v-model="newTag"
    size="mini"
    placeholder="新增标签"
    style="width: 96px"
    @press-enter="addTag"
    @blur="addTag"
  />
  <x-tag v-else bordered @click="editing = true">+ 新增</x-tag>
</template>

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

const dynamicTags = ref(['Vue', 'TypeScript', 'VitePress']);
const editing = ref(false);
const newTag = ref('');

const removeTag = (tag: string) => {
  dynamicTags.value = dynamicTags.value.filter((item) => item !== tag);
};

const addTag = () => {
  const value = newTag.value.trim();
  if (value && !dynamicTags.value.includes(value)) {
    dynamicTags.value.push(value);
  }
  newTag.value = '';
  editing.value = false;
};
</script>

不换行 ​

这是一段很长但不会换行的标签内容
vue
<template>
  <x-tag nowrap style="max-width: 180px">
    这是一段很长但不会换行的标签内容
  </x-tag>
</template>

按需导入 ​

ts
import { Tag } from 'x-next';

Props ​

参数说明类型默认值
color标签颜色，支持内置色或自定义 CSS 色值TagColor | string-
size标签尺寸'small' | 'medium' | 'large''medium'
bordered是否显示边框booleanfalse
visible标签是否可见，支持 v-model:visiblebooleanundefined
defaultVisible默认是否可见，非受控模式booleantrue
loading是否为加载状态booleanfalse
closable是否可关闭booleanfalse
selectable是否可选择booleanfalse
checked是否选中，仅 selectable 时有效，支持 v-model:checkedbooleanundefined
defaultChecked默认是否选中，非受控模式booleantrue
nowrap标签内容是否不换行booleanfalse

TagColor ​

red、orangered、orange、gold、lime、green、cyan、blue、better-blue、purple、pink-purple、magenta、gray

Events ​

事件名说明回调参数
update:visible可见状态变化时触发visible: boolean
update:checked选中状态变化时触发checked: boolean
close点击关闭按钮时触发event: MouseEvent
check点击可选择标签时触发checked: boolean, event: MouseEvent

Slots ​

插槽名说明
default标签内容
icon自定义图标
close-icon自定义关闭图标