FxTag 标签

用于标记和选择。不依赖任何 UI 框架，颜色走 @fx/styles 的 --color-* token。

基础用法

type 控制语义色。

<template>
  <div class="row">
    <FxTag type="primary">Primary</FxTag>
    <FxTag type="success">Success</FxTag>
    <FxTag type="info">Info</FxTag>
    <FxTag type="warning">Warning</FxTag>
    <FxTag type="danger">Danger</FxTag>
  </div>
</template>

<style scoped>
.row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
</style>

<FxTag type="success">Success</FxTag>
<FxTag type="danger">Danger</FxTag>

可移除

closable 显示关闭按钮，close 事件触发移除。

<template>
  <div class="row">
    <FxTag
      v-for="tag in tags"
      :key="tag"
      closable
      :type="tag === '标签一' ? 'primary' : 'success'"
      @close="remove(tag)"
    >
      {{ tag }}
    </FxTag>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue"
const tags = ref(["标签一", "标签二", "标签三"])
function remove(t: string) {
  tags.value = tags.value.filter((x) => x !== t)
}
</script>

<style scoped>
.row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
</style>

动态编辑

配合 closable + 输入框实现动态增删。

<template>
  <div class="row">
    <FxTag
      v-for="tag in dynamicTags"
      :key="tag"
      closable
      @close="handleClose(tag)"
    >
      {{ tag }}
    </FxTag>
    <FxInput
      v-if="inputVisible"
      ref="inputRef"
      v-model="inputValue"
      class="input"
      size="small"
      @keyup.enter="handleInputConfirm"
      @blur="handleInputConfirm"
    />
    <FxBtn v-else size="small" @click="showInput">+ New Tag</FxBtn>
  </div>
</template>

<script setup lang="ts">
import { nextTick, ref } from "vue"

const dynamicTags = ref(["标签一", "标签二", "标签三"])
const inputVisible = ref(false)
const inputValue = ref("")
const inputRef = ref()

function handleClose(tag: string) {
  dynamicTags.value = dynamicTags.value.filter((t) => t !== tag)
}
function showInput() {
  inputVisible.value = true
  nextTick(() => inputRef.value?.focus?.())
}
function handleInputConfirm() {
  if (inputValue.value) dynamicTags.value.push(inputValue.value)
  inputVisible.value = false
  inputValue.value = ""
}
</script>

<style scoped>
.row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.input {
  width: 100px;
}
</style>

尺寸

size：large / default / small。

<template>
  <div class="row">
    <FxTag size="large" type="success">Large</FxTag>
    <FxTag type="success">Default</FxTag>
    <FxTag size="small" type="success">Small</FxTag>
  </div>
</template>

<style scoped>
.row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
</style>

主题

effect：dark（实色底）/ light（浅色底）/ plain（描边）。

<template>
  <div class="col">
    <div class="row">
      <FxTag effect="dark">Dark Default</FxTag>
      <FxTag effect="dark" type="success">Dark Success</FxTag>
      <FxTag effect="dark" type="danger">Dark Danger</FxTag>
    </div>
    <div class="row">
      <FxTag effect="light">Light Default</FxTag>
      <FxTag effect="light" type="success">Light Success</FxTag>
      <FxTag effect="light" type="danger">Light Danger</FxTag>
    </div>
    <div class="row">
      <FxTag effect="plain">Plain Default</FxTag>
      <FxTag effect="plain" type="success">Plain Success</FxTag>
      <FxTag effect="plain" type="danger">Plain Danger</FxTag>
    </div>
  </div>
</template>

<style scoped>
.col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.row {
  display: flex;
  align-items: center;
  gap: 8px;
}
</style>

圆角

round 圆角标签。

<template>
  <div class="row">
    <FxTag type="primary" round>Rounded</FxTag>
    <FxTag type="success" round>Success</FxTag>
    <FxTag type="info" round>Info</FxTag>
    <FxTag type="warning" round>Warning</FxTag>
    <FxTag type="danger" round>Danger</FxTag>
  </div>
</template>

<style scoped>
.row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
</style>

可选标签

业务中有时需要「复选框式」的标签，此时可使用 FxCheckTag。它独立于 FxTag，通过 checked（支持 v-model:checked）控制选中态，type 指定选中后的语义色，disabled 可禁用。

<template>
  <div class="flex gap-2">
    <FxCheckTag checked>已选中</FxCheckTag>
    <FxCheckTag :checked="checked" @change="onChange">点击切换</FxCheckTag>
    <FxCheckTag disabled>禁用</FxCheckTag>
  </div>
  <div class="flex gap-2 mt-4">
    <FxCheckTag :checked="checked1" type="primary" @change="onChange1">
      标签一
    </FxCheckTag>
    <FxCheckTag :checked="checked2" type="success" @change="onChange2">
      标签二
    </FxCheckTag>
    <FxCheckTag :checked="checked3" type="info" @change="onChange3">
      标签三
    </FxCheckTag>
    <FxCheckTag :checked="checked4" type="warning" @change="onChange4">
      标签四
    </FxCheckTag>
    <FxCheckTag :checked="checked5" type="danger" @change="onChange5">
      标签五
    </FxCheckTag>
    <FxCheckTag :checked="checked6" disabled type="success" @change="onChange6">
      标签六
    </FxCheckTag>
  </div>
</template>

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

const checked = ref(false)
const checked1 = ref(true)
const checked2 = ref(true)
const checked3 = ref(true)
const checked4 = ref(true)
const checked5 = ref(true)
const checked6 = ref(true)

const onChange = (status: boolean) => {
  checked.value = status
}
const onChange1 = (status: boolean) => {
  checked1.value = status
}
const onChange2 = (status: boolean) => {
  checked2.value = status
}
const onChange3 = (status: boolean) => {
  checked3.value = status
}
const onChange4 = (status: boolean) => {
  checked4.value = status
}
const onChange5 = (status: boolean) => {
  checked5.value = status
}
const onChange6 = (status: boolean) => {
  checked6.value = status
}
</script>

Tag API

Attributes

属性	说明	类型	默认值
type	类型	'primary' | 'success' | 'info' | 'warning' | 'danger'	primary
closable	是否可关闭	boolean	false
disable-transitions	是否禁用过渡	boolean	false
hit	是否有描边	boolean	false
color	自定义背景色	string	—
size	尺寸	'large' | 'default' | 'small'	default
effect	主题	'dark' | 'light' | 'plain'	light
round	是否圆角	boolean	false

Slots

插槽名	说明
default	标签内容

Events

事件名	说明	类型
close	关闭时触发	(evt: MouseEvent) => void
click	点击时触发	(evt: MouseEvent) => void

CheckTag API

CheckTag Attributes

属性	说明	类型	默认值
checked / v-model:checked	是否选中	boolean	false
disabled	是否禁用	boolean	false
type	选中后的语义色	'primary' | 'success' | 'info' | 'warning' | 'danger'	primary

CheckTag Events

事件名	说明	类型
change	切换选中态时触发	(value: boolean) => void

CheckTag Slots

插槽名	说明
default	标签内容