更新记录

0.0.2（2025-12-06）

• 完善了渐变文本组件的功能和样式
• 添加了径向渐变和锥形渐变支持
• 优化了样式兼容性，解决了父元素flex布局下的宽度问题
• 重构了代码，提取了通用工具函数
• 完善了文档，添加了多种使用示例
• 修复了样式显示问题

0.0.1（2025-12-06）

• init

平台兼容性

uni-app(4.85)

uni-app x(4.87)

lime-gradient-text 渐变文字组件

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

插件依赖：lime-shared

文档链接

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

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

安装方法

1. 在uni-app插件市场中搜索并导入lime-gradient-text
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 />

插件标签说明

Vue2使用说明

main.js中添加以下代码：

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

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

API文档

Props 属性说明

支持与赞赏

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

支付宝赞助	微信赞助