@tanzhenxing/zx-tag NPM

ZX-Tag 标签组件

用于标记和选择的标签组件，提供了丰富的表现形式，参考 Element Plus Tag 组件设计。

特性

🎨 多种类型：primary、success、info、warning、danger
🎯 多种主题：dark、light、plain
📏 多种尺寸：large、default、small
🔘 支持圆形标签
🚫 可关闭标签
✅ 可选中标签（CheckTag）
🎭 支持自定义图标
🎪 支持动画效果
🧩 插槽支持

组件列表

ZxTag - 基础标签

基础的标签组件，支持多种样式和功能。

ZxCheckTag - 可选中标签

可选中的标签组件，类似复选框但是按钮式的样式。

安装使用

// 导入组件
import { ZxTag, ZxCheckTag } from '@/components/zx-tag'

// 或者单独导入
import ZxTag from '@/components/zx-tag/zx-tag.vue'
import ZxCheckTag from '@/components/zx-tag/zx-check-tag.vue'

ZxTag 基础用法

基础标签

<template>
  <view class="flex gap-2">
    <zx-tag text="Primary" type="primary" />
    <zx-tag text="Success" type="success" />
    <zx-tag text="Info" type="info" />
    <zx-tag text="Warning" type="warning" />
    <zx-tag text="Danger" type="danger" />
  </view>
</template>

不同主题

<template>
  <view>
    <!-- Dark 主题 -->
    <view class="flex gap-2 mb-2">
      <zx-tag text="Dark" type="primary" effect="dark" />
      <zx-tag text="Dark" type="success" effect="dark" />
    </view>
    
    <!-- Light 主题（默认） -->
    <view class="flex gap-2 mb-2">
      <zx-tag text="Light" type="primary" effect="light" />
      <zx-tag text="Light" type="success" effect="light" />
    </view>
    
    <!-- Plain 主题 -->
    <view class="flex gap-2">
      <zx-tag text="Plain" type="primary" effect="plain" />
      <zx-tag text="Plain" type="success" effect="plain" />
    </view>
  </view>
</template>

不同尺寸

<template>
  <view class="flex gap-2">
    <zx-tag text="Large" size="large" />
    <zx-tag text="Default" size="default" />
    <zx-tag text="Small" size="small" />
  </view>
</template>

可移除标签

<template>
  <view class="flex gap-2">
    <zx-tag 
      v-for="tag in tags" 
      :key="tag.name" 
      :text="tag.name"
      :type="tag.type"
      closable 
      @close="handleClose"
    />
  </view>
</template>

<script setup>
import { ref } from 'vue'

const tags = ref([
  { name: 'Tag 1', type: 'primary' },
  { name: 'Tag 2', type: 'success' },
  { name: 'Tag 3', type: 'info' }
])

const handleClose = (index) => {
  tags.value.splice(index, 1)
}
</script>

圆形标签

<template>
  <view class="flex gap-2">
    <zx-tag text="Round" type="primary" round />
    <zx-tag text="Round" type="success" round />
    <zx-tag text="Round" type="info" round />
  </view>
</template>

带图标的标签

<template>
  <view class="flex gap-2">
    <zx-tag text="图标标签" type="primary" icon="star" />
    <zx-tag text="图片标签" type="success" icon="https://zxui.org/logo.png" />
  </view>
</template>

自定义插槽

<template>
  <zx-tag type="primary">
    <template #icon>
      <zx-icon name="heart" />
    </template>
    自定义内容
  </zx-tag>
</template>

ZxCheckTag 可选中标签

基础用法

<template>
  <view class="flex gap-2">
    <zx-check-tag v-model:checked="checked1" text="可选标签" />
    <zx-check-tag :checked="true" text="已选中" disabled />
    <zx-check-tag text="未选中" />
  </view>
</template>

<script setup>
import { ref } from 'vue'
const checked1 = ref(false)
</script>

不同类型

<template>
  <view class="flex gap-2">
    <zx-check-tag v-model:checked="checked1" text="Primary" type="primary" />
    <zx-check-tag v-model:checked="checked2" text="Success" type="success" />
    <zx-check-tag v-model:checked="checked3" text="Warning" type="warning" />
  </view>
</template>

ZxTag API

Attributes

属性名	说明	类型	可选值	默认值
type	标签类型	string	primary/success/info/warning/danger/error	primary
effect	主题	string	dark/light/plain	light
size	标签尺寸	string	large/default/small	default
shape	标签形状	string	circle/square	square
round	是否为圆形	boolean	-	false
hit	是否有边框描边	boolean	-	false
text	标签文字	string/number	-	-
closable	是否可关闭	boolean	-	false
disabled	是否禁用	boolean	-	false
show	是否显示	boolean	-	true
disableTransitions	是否禁用动画	boolean	-	false
icon	图标名称或图片路径	string	-	-
iconColor	图标颜色	string	-	-
bgColor	背景色	string	-	-
color	文字颜色	string	-	-
borderColor	边框颜色	string	-	-
closeColor	关闭按钮颜色	string	-	#C6C7CB
name	标识符	string/number	-	-
plain	是否镂空（废弃）	boolean	-	false
plainFill	镂空时是否填充	boolean	-	false

Events

事件名	说明	回调参数
click	点击标签时触发	(name)
close	关闭标签时触发	(name)

Slots

名称	说明
default	标签内容
icon	自定义图标

ZxCheckTag API

Attributes

属性名	说明	类型	可选值	默认值
checked / v-model:checked	是否选中	boolean	-	false
disabled	是否禁用	boolean	-	false
type	标签类型	string	primary/success/info/warning/danger	primary
size	标签尺寸	string	large/default/small	default
text	标签文字	string/number	-	-
bgColor	背景色	string	-	-
color	文字颜色	string	-	-
borderColor	边框颜色	string	-	-