更新记录

1.0.0（2026-04-15）

1.0.0：初始版本，支持多种颜色、形状、可关闭、可带图标、可带角标等功能

平台兼容性

uni-app(3.7.6)

其他

Tags Badges Pro 标签组件

标签组件，用于展示标签、徽章等信息，支持多种颜色、形状、可关闭、可带图标、可带角标等功能。

设计理念

Tag 组件的设计理念是提供一个轻量级、灵活的标签/徽章解决方案，适用于各种场景下的信息展示和状态标记。组件采用模块化设计，通过丰富的属性和插槽，满足不同场景的需求。

使用场景

• 分类标签：用于对内容进行分类和标记
• 状态标记：用于显示项目的状态，如成功、警告、危险等
• 标签筛选：用于筛选条件的展示和选择
• 消息通知：结合角标功能，用于显示未读消息数量
• 徽章展示：用于展示用户等级、积分等信息

特性

• ✅ 支持多种颜色类型
• ✅ 支持不同尺寸
• ✅ 支持胶囊形状
• ✅ 支持可关闭功能
• ✅ 支持自定义颜色
• ✅ 支持带图标
• ✅ 支持角标功能
• ✅ 符合 easycom 规范

安装

由于使用了 easycom 规范，无需手动导入，可直接在页面中使用。

使用方法

基础使用

<tags-badges-pro>默认标签</tags-badges-pro>
<tags-badges-pro type="primary">主要标签</tags-badges-pro>
<tags-badges-pro type="success">成功标签</tags-badges-pro>
<tags-badges-pro type="warning">警告标签</tags-badges-pro>
<tags-badges-pro type="danger">危险标签</tags-badges-pro>

不同尺寸

<tags-badges-pro size="small">小标签</tags-badges-pro>
<tags-badges-pro size="medium">中标签</tags-badges-pro>
<tags-badges-pro size="large">大标签</tags-badges-pro>

胶囊形状

<tags-badges-pro round>默认胶囊</tags-badges-pro>
<tags-badges-pro type="primary" round>主要胶囊</tags-badges-pro>

可关闭标签

<tags-badges-pro closable @close="handleClose">可关闭</tags-badges-pro>
<tags-badges-pro type="primary" closable @close="handleClose">可关闭</tags-badges-pro>

自定义颜色

<tag color="#9c27b0" textColor="#fff">紫色</tag>
<tag color="#ff4081" textColor="#fff">粉色</tag>

带图标的标签

<tag>
  <text slot="icon">📌</text>
  带图标
</tag>
<tag type="primary">
  <text slot="icon">⭐</text>
  带图标
</tag>

属性说明

事件说明

插槽说明

示例代码

<template>
  <view class="content">
    <view class="section">
      <text class="section-title">标签组件示例</text>

      <view class="subsection">
        <text class="subsection-title">基础标签</text>
        <view class="tag-container">
          <tags-badges-pro>默认标签</tags-badges-pro>
          <tags-badges-pro type="primary">主要标签</tags-badges-pro>
          <tags-badges-pro type="success">成功标签</tags-badges-pro>
          <tags-badges-pro type="warning">警告标签</tags-badges-pro>
          <tags-badges-pro type="danger">危险标签</tags-badges-pro>
        </view>
      </view>

      <view class="subsection">
        <text class="subsection-title">不同尺寸</text>
        <view class="tag-container">
          <tags-badges-pro size="small">小标签</tags-badges-pro>
          <tags-badges-pro size="medium">中标签</tags-badges-pro>
          <tags-badges-pro size="large">大标签</tags-badges-pro>
        </view>
      </view>

      <view class="subsection">
        <text class="subsection-title">胶囊形状</text>
        <view class="tag-container">
          <tags-badges-pro round>默认胶囊</tags-badges-pro>
          <tags-badges-pro type="primary" round>主要胶囊</tags-badges-pro>
          <tags-badges-pro type="success" round>成功胶囊</tags-badges-pro>
          <tags-badges-pro type="warning" round>警告胶囊</tags-badges-pro>
          <tags-badges-pro type="danger" round>危险胶囊</tags-badges-pro>
        </view>
      </view>

      <view class="subsection">
        <text class="subsection-title">可关闭标签</text>
        <view class="tag-container">
          <tags-badges-pro closable @close="handleClose">可关闭</tags-badges-pro>
          <tags-badges-pro type="primary" closable @close="handleClose">可关闭</tags-badges-pro>
          <tags-badges-pro type="success" closable @close="handleClose">可关闭</tags-badges-pro>
        </view>
      </view>

      <view class="subsection">
        <text class="subsection-title">自定义颜色</text>
        <view class="tag-container">
          <tags-badges-pro color="#9c27b0" textColor="#fff">紫色</tags-badges-pro>
          <tags-badges-pro color="#ff4081" textColor="#fff">粉色</tags-badges-pro>
          <tags-badges-pro color="#607d8b" textColor="#fff">蓝灰</tags-badges-pro>
        </view>
      </view>

      <view class="subsection">
        <text class="subsection-title">带图标的标签</text>
        <view class="tag-container">
          <tags-badges-pro>
            <text slot="icon">📌</text>
            带图标
          </tags-badges-pro>
          <tags-badges-pro type="primary">
            <text slot="icon">⭐</text>
            带图标
          </tags-badges-pro>
          <tags-badges-pro type="success">
            <text slot="icon">✅</text>
            带图标
          </tags-badges-pro>
        </view>
      </view>

      <view class="subsection">
        <text class="subsection-title">带角标的标签</text>
        <view class="tag-container">
          <tags-badges-pro badge="3">消息</tags-badges-pro>
          <tags-badges-pro type="primary" badge="12">通知</tags-badges-pro>
          <tags-badges-pro type="success" badge="99+" badgeColor="#4cd964">任务</tags-badges-pro>
          <tags-badges-pro type="warning" badge="5" badgeColor="#ff9500">提醒</tags-badges-pro>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    methods: {
      handleClose() {
        console.log('标签已关闭')
      }
    }
  }
</script>

<style>
  .content {
    padding: 40rpx;
  }

  .section {
    margin-bottom: 40rpx;
  }

  .section-title {
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
    color: #333;
  }

  .subsection {
    margin-bottom: 30rpx;
  }

  .subsection-title {
    font-size: 28rpx;
    margin-bottom: 16rpx;
    color: #666;
  }

  .tag-container {
    display: flex;
    flex-wrap: wrap;
    gap: 16rpx;
  }
</style>

浏览器支持

• 微信小程序
• 支付宝小程序
• 百度小程序
• 字节跳动小程序
• H5
• App

贡献

欢迎提交 Issue 和 Pull Request 来改进这个组件。

许可证

MIT