更新记录

1.0.0（2025-08-12） 下载此版本

一个功能丰富的 uni-app 标签组件，支持多种主题、自定义样式和灵活配置。

平台兼容性

云端兼容性

uni-app(4.76)

其他

jia-tag 标签组件

一个功能丰富的 uni-app 标签组件，支持多种主题、自定义样式和灵活配置。

特性

• 🎨 多种预设主题（primary、success、warning、danger、purple）
• 🌈 三种显示模式（dark、light、plain）
• 🎯 灵活的自定义样式（背景色、字体色、边框等）
• 📱 完美适配各种 uni-app 平台
• ⚡ 轻量级，无外部依赖
• 🔧 支持缩放、圆角、内外边距等高级配置

安装方法

在 uni-app 插件市场中搜索 jia-tag 并导入到项目中。

基础用法

<template>
  <view>
    <!-- 基础标签 -->
    <jia-tag text="基础标签"></jia-tag>

    <!-- 不同类型 -->
    <jia-tag text="主要" type="primary"></jia-tag>
    <jia-tag text="成功" type="success"></jia-tag>
    <jia-tag text="警告" type="warning"></jia-tag>
    <jia-tag text="危险" type="danger"></jia-tag>
    <jia-tag text="紫色" type="purple"></jia-tag>

    <!-- 不同主题 -->
    <jia-tag text="深色主题" type="primary" theme="dark"></jia-tag>
    <jia-tag text="浅色主题" type="primary" theme="light"></jia-tag>
    <jia-tag text="朴素主题" type="primary" theme="plain"></jia-tag>
  </view>
</template>

API

Props

Events

Slots

使用示例

基础标签

<template>
  <view class="tag-container">
    <jia-tag text="默认标签"></jia-tag>
    <jia-tag text="主要" type="primary"></jia-tag>
    <jia-tag text="成功" type="success"></jia-tag>
    <jia-tag text="警告" type="warning"></jia-tag>
    <jia-tag text="危险" type="danger"></jia-tag>
    <jia-tag text="紫色" type="purple"></jia-tag>
  </view>
</template>

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

不同主题

<template>
  <view>
    <!-- 深色主题 -->
    <view class="section">
      <text class="title">深色主题</text>
      <view class="tag-container">
        <jia-tag text="主要" type="primary" theme="dark"></jia-tag>
        <jia-tag text="成功" type="success" theme="dark"></jia-tag>
        <jia-tag text="警告" type="warning" theme="dark"></jia-tag>
      </view>
    </view>

    <!-- 浅色主题 -->
    <view class="section">
      <text class="title">浅色主题</text>
      <view class="tag-container">
        <jia-tag text="主要" type="primary" theme="light"></jia-tag>
        <jia-tag text="成功" type="success" theme="light"></jia-tag>
        <jia-tag text="警告" type="warning" theme="light"></jia-tag>
      </view>
    </view>

    <!-- 朴素主题 -->
    <view class="section">
      <text class="title">朴素主题</text>
      <view class="tag-container">
        <jia-tag text="主要" type="primary" theme="plain"></jia-tag>
        <jia-tag text="成功" type="success" theme="plain"></jia-tag>
        <jia-tag text="警告" type="warning" theme="plain"></jia-tag>
      </view>
    </view>
  </view>
</template>

自定义样式

<template>
  <view class="tag-container">
    <!-- 自定义颜色 -->
    <jia-tag 
      text="自定义背景" 
      background="#CCCCCC" 
      color="#fff"
    ></jia-tag>

    <!-- 无边框 -->
    <jia-tag 
      text="无边框" 
      :isBorder="false" 
      background="#fff" 
      color="#000"
    ></jia-tag>

    <!-- 圆角标签 -->
    <jia-tag 
      text="圆角" 
      radius="50"
    ></jia-tag>

    <!-- 大字体 -->
    <jia-tag 
      text="字体大小" 
      type="danger" 
      size="30"
    ></jia-tag>

    <!-- 自定义内边距 -->
    <jia-tag 
      text="padding" 
      type="purple" 
      :padding="['16rpx', '100rpx']"
    ></jia-tag>

    <!-- 自定义边框颜色 -->
    <jia-tag 
      text="边框颜色" 
      background="#CCCCCC" 
      color="#fff" 
      borderColor="red"
    ></jia-tag>

    <!-- 缩放效果 -->
    <jia-tag 
      text="originLeft" 
      type="warning" 
      :scaleRatio="1.2" 
      originLeft
    ></jia-tag>

    <!-- 点击高亮 -->
    <jia-tag 
      text="点击效果" 
      type="success" 
      highlight
      @click="handleClick"
    ></jia-tag>
  </view>
</template>

<script>
export default {
  methods: {
    handleClick() {
      uni.showToast({
        title: '标签被点击',
        icon: 'none'
      });
    }
  }
}
</script>

使用插槽

<template>
  <view class="tag-container">
    <!-- 自定义内容 -->
    <jia-tag type="purple" theme="plain" @click="handleClick">
      <text>自定义内容</text>
      <text class="icon">×</text>
    </jia-tag>

    <!-- 图标 + 文字 -->
    <jia-tag type="primary">
      <text>🏷️ 带图标</text>
    </jia-tag>
  </view>
</template>

主题色彩

预设颜色

注意事项

1. 当设置了 background 属性时，type 属性将失效
2. padding 和 margin 数组支持 1-4 个值，遵循 CSS 简写规则
3. 缩放功能建议配合 originLeft 或 originRight 使用，避免布局偏移
4. 在小程序中使用时，建议在 pages.json 中配置 easycom 自动引入