基于原生渲染的渐变文字组件，支持线性、径向、锥形渐变，兼容uniapp/uniappx(ios,web,小程序)多平台

更新记录

0.0.5（2025-12-08）

• fix: 修复uniappx ios径向渐变无效的问题

0.0.4（2025-12-07）

• fix: 修复uniappx app不显示问题

0.0.3（2025-12-07）

• 增加了uniappx安卓和鸿蒙的兼容

查看更多

---

平台兼容性

uni-app(4.85)

Vue2	Vue3	Chrome	Safari	app-vue	app-nvue	Android	iOS	鸿蒙
√	√	√	√	√	×	5.0	√	√

微信小程序	支付宝小程序	抖音小程序	百度小程序	快手小程序	京东小程序	鸿蒙元服务	QQ小程序	飞书小程序	快应用-华为	快应用-联盟
√	√	√	√	√	√	√	√	√	√	√

uni-app x(4.87)

Chrome	Safari	Android	iOS	鸿蒙	微信小程序
√	√	-	√	-	√

lime-gradient-text 渐变文字组件

基于原生渲染的渐变文字组件，支持多种渐变类型（线性、径向、锥形）和自定义配置，兼容uniapp/uniappx。

插件依赖：lime-shared

文档链接

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

• 渐变文字组件文档 - 站点1
• 渐变文字组件文档 - 站点2
• 渐变文字组件文档 - 站点3

安装方法

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

::: tip 注意🔔 本组件在App端使用原生渲染，需要自定义基座才能正常运行！ :::

代码演示

基础使用

使用渐变文字组件的基本示例

<l-gradient-text 
  text="线性渐变文字"
  type="linear"
  :deg="90"
  :colors="['#FF0080', '#FF8C00', '#40E0D0']"
/>

线性渐变

设置不同角度的线性渐变

<l-gradient-text 
  text="45度线性渐变"
  type="linear"
  :deg="45"
  :colors="['#FF6B6B', '#4ECDC4']"
/>

径向渐变

使用径向渐变效果，这个要看环境是否支持，不一定能实现

<l-gradient-text 
  text="径向渐变文字"
  type="radial"
  :colors="['#FF0080', '#FF8C00', '#40E0D0']"
/>

锥形渐变

使用锥形渐变效果，这个要看环境是否支持，不一定能实现

<l-gradient-text 
  text="锥形渐变文字"
  type="conic"
  :deg="45"
  :colors="['#FF0000', '#FFFF00', '#00FF00', '#00FFFF', '#0000FF', '#FF00FF', '#FF0000']"
/>

自定义颜色位置

使用位置对象自定义颜色分布

<l-gradient-text 
  text="自定义颜色位置"
  type="linear"
  :deg="90"
  :colors="{0: '#FF0000', 30: '#FFFF00', 70: '#00FF00', 100: '#0000FF'}"
/>

快速预览

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

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

插件标签说明

标签名	说明
l-gradient-text	组件标签
lime-gradient-text	演示标签

Vue2使用说明

main.js中添加以下代码：

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

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

API文档

Props 属性说明

属性名	说明	类型	默认值	必填
text	显示的文本内容	string	-	否
type	渐变类型，可选值：linear（线性）、radial（径向）、conic（锥形）	string	'linear'	否
deg	渐变角度（0-360度），仅对linear和conic类型有效	number	0	否
colors	颜色数组，支持多种格式： 1. 颜色字符串数组：['#FF0000', '#00FF00'] 2. 位置对象：{0: 'red', 50: 'blue', 100: 'green'}	string[] | UTSJSONObject	[]	否
gradient	自定义渐变样式，用于覆盖默认生成的渐变	string | UTSJSONObject	null	否