更新记录

1.0.0（2025-09-06） 下载此版本

first

平台兼容性

uni-app x(4.75)

xudy-tag 标签组件

基于 UniApp X 的轻量级标签组件，支持多种样式和交互效果。

特性

• 🎨 多种预设样式：default、primary、success、warning、error
• 📏 尺寸控制：large、normal、small
• 🎭 样式变体：朴素样式、带背景朴素样式、圆角、标记样式
• ❌ 可关闭标签
• 🖼️ 图标支持
• 🎯 事件支持：click、close
• 📱 跨平台兼容：iOS、Android、Web

安装

在 UniApp X 项目中直接引入组件使用。

基础用法

<template>
  <xudy-tag text="默认标签" />
  <xudy-tag text="主要标签" type="primary" />
  <xudy-tag text="成功标签" type="success" />
  <xudy-tag text="警告标签" type="warning" />
  <xudy-tag text="错误标签" type="error" />
</template>
属性说明
基础属性
属性名 类型  默认值 说明
type    String  "default"   标签类型
text    String  ""  标签文本
show    Boolean true    是否显示
closeable   Boolean false   是否可关闭
样式属性
属性名 类型  默认值 说明
size    String  ""  尺寸控制
plain   Boolean false   朴素样式
plainFill   Boolean false   带背景朴素样式
round   Boolean false   圆角样式
mark    Boolean false   标记样式
文本属性
属性名 类型  默认值 说明
textColor   String  ""  文字颜色
textSize    String | Number ""  文字大小
事件说明
事件名 参数  说明
click   UniPointerEvent 点击事件
close   UniPointerEvent 关闭事件
插槽说明
插槽名 说明
icon    自定义图标
使用示例
尺寸控制
vue
<xudy-tag text="大标签" size="large" />
<xudy-tag text="普通标签" />
<xudy-tag text="小标签" size="small" />
样式变体
vue
<xudy-tag text="朴素样式" plain />
<xudy-tag text="带背景朴素" plainFill />
<xudy-tag text="圆角标签" round />
<xudy-tag text="标记样式" mark />
可关闭标签
vue
<xudy-tag text="可关闭标签" closeable @close="handleClose" />
自定义图标
vue
<xudy-tag text="带图标标签">
  <template #icon>
    <text class="custom-icon">⭐</text>
  </template>
</xudy-tag>
自定义样式
vue
<xudy-tag text="自定义颜色" textColor="#ff5500" textSize="16" />
事件处理
vue
<xudy-tag text="点击测试" @click="handleClick" />
<xudy-tag text="关闭测试" closeable @close="handleClose" />