更新记录

0.0.8（2025-09-04） 下载此版本

• fix: 修复切换type 文字颜色不生效问题

0.0.7（2025-06-11） 下载此版本

• fix: 修复无法自定义文本颜色

0.0.6（2025-04-22） 下载此版本

• feat: 兼容uniappx 鸿蒙next

平台兼容性

uni-app(4.44)

uni-app x(4.61)

lime-tag 标签组件

一个功能丰富的标签组件，用于标记和分类。支持多种形状、尺寸、颜色和风格变体，可用于标记状态、分类、提示等多种场景。组件提供了丰富的自定义选项，可以满足各种复杂的界面设计需求。

插件依赖：lime-shared、lime-style

文档链接

📚 组件详细文档请访问以下站点：

• 标签组件文档 - 站点1
• 标签组件文档 - 站点2
• 标签组件文档 - 站点3

安装方法

1. 在uni-app插件市场中搜索并导入lime-tag
2. 导入后可能需要重新编译项目
3. 在页面中使用l-tag组件

::: tip 注意🔔 本插件依赖的【lime-svg】是原生插件，如果购买(收费为6元)则需要自定义基座，才能使用， 若不需要删除即可 :::

代码演示

标签主题

通过 type 属性控制标签颜色。

<l-tag type="primary">品牌色</l-tag>
<l-tag type="success">成功色</l-tag>
<l-tag type="warning">警告色</l-tag>
<l-tag type="danger">危险色</l-tag>
<l-tag>通用色</l-tag>

标签形状

通过 shape 属性控制标签形状。

<l-tag shape="square" type="primary">方形</l-tag>
<l-tag shape="round" type="success">圆角</l-tag>
<l-tag shape="mark" type="primary">半圆</l-tag>

标签变种

通过variant 属性控制标签图标。

<l-tag variant="light">高亮</l-tag>
<l-tag variant="light" type="primary">品牌</l-tag>
<l-tag variant="light" type="success">成功</l-tag>
<l-tag variant="light" type="warning">警告</l-tag>
<l-tag variant="light" type="danger">危险</l-tag>

<l-tag>深色</l-tag>
<l-tag type="primary">品牌</l-tag>
<l-tag type="success">成功</l-tag>
<l-tag type="warning">警告</l-tag>
<l-tag type="danger">危险</l-tag>

<l-tag variant="outline">描边</l-tag>
<l-tag variant="outline" type="primary">品牌</l-tag>
<l-tag variant="outline" type="success">成功</l-tag>
<l-tag variant="outline" type="warning">警告</l-tag>
<l-tag variant="outline" type="danger">危险</l-tag>

<l-tag variant="light-outline">光廓</l-tag>
<l-tag variant="light-outline" type="primary">品牌</l-tag>
<l-tag variant="light-outline" type="success">成功</l-tag>
<l-tag variant="light-outline" type="warning">警告</l-tag>
<l-tag variant="light-outline" type="danger">危险</l-tag>

标签图标

通过icon 属性控制标签图标。

<l-tag icon="face-retouching" type="primary">标签</l-tag>
<l-tag icon="filter-3" variant="light">标签</l-tag>
<l-tag icon="markup" variant="outline">标签</l-tag>

标签尺寸

通过 size 属性控制标签大小。

<l-tag size="mini" type="primary">细</l-tag>
<l-tag size="small" type="primary">小</l-tag>
<l-tag size="medium" type="primary">中</l-tag>
<l-tag size="large" type="warning">大</l-tag>
<l-tag size="extra-large" type="primary">加大</l-tag>

超长文本省略标签

通过max-width 属性,当内容超过时显示省略号。

<l-tag max-width="130px" variant="light">听说超长可以省略听说超长</l-tag>

自定义颜色

通过 color 属性设置标签颜色，。

<l-tag color="#7232dd" icon="face-retouching">标签</l-tag>
<l-tag color="linear-gradient(to right, rgb(255, 96, 52), rgb(238, 10, 36))" icon="filter-3">标签</l-tag>
<l-tag color="#7232dd" icon="markup" variant="outline">标签</l-tag>

可关标签

通过 closable 属性设置标签可关闭，通过 @close事件接收关闭事件。

<l-tag v-if="show1" @close="show1 = false" :closable="true" icon="face-retouching" type="primary">标签</l-tag>
<l-tag v-if="show2" @close="show2 = false" :closable="true" icon="filter-3" variant="light">标签</l-tag>
<l-tag v-if="show3" @close="show3 = false" :closable="true" icon="markup" variant="outline">标签</l-tag>

快速预览

导入插件后，可以直接使用以下标签查看演示效果：

<!-- 代码位于 uni_modules/lime-tag/components/lime-tag -->
<lime-tag />

插件标签说明

Vue2使用说明

main.js中添加以下代码：

// vue2项目中使用
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)

详细配置请参考官方文档：Vue Composition API

API文档

Props 属性说明

Events 事件

Slots 插槽

主题定制

组件提供了以下CSS变量，可用于自定义样式：

支持与赞赏

如果你觉得本插件解决了你的问题，可以考虑支持作者：

支付宝赞助	微信赞助