LimeUI+1.2.5

主题

LimeGradientText 渐变文字组件 ​

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

插件依赖：lime-shared

文档链接 ​

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

安装方法 ​

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

注意🔔

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

代码演示 ​

基础使用 ​

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

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

线性渐变 ​

设置不同角度的线性渐变

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

径向渐变 ​

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

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

锥形渐变 ​

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

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

自定义颜色位置 ​

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

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

快速预览 ​

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

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

插件标签说明 ​

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

Vue2使用说明 ​

main.js中添加以下代码：

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类型有效number0否
colors颜色数组，支持多种格式：
1. 颜色字符串数组：['#FF0000', '#00FF00']
2. 位置对象：{0: 'red', 50: 'blue', 100: 'green'}		string[] | UTSJSONObject[]否
gradient自定义渐变样式，用于覆盖默认生成的渐变string | UTSJSONObjectnull否

支持与赞赏 ​

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

支付宝赞助微信赞助

源代码 ​

组件源码