更新记录

1.0.0（2026-07-12） 下载此版本

初始版本

平台兼容性

uni-app(4.0)

zv-text-gradient

文本渐变组件，支持线性、径向、锥形渐变。

用法

<!-- 线性渐变 -->
<zv-text-gradient text="线性渐变文本" />

<!-- 不同角度 -->
<zv-text-gradient text="45度渐变" :angle="45" :colors="['#ff6b6b', '#4ecdc4']" />
<zv-text-gradient text="0度渐变" :angle="0" :colors="['#ff6b6b', '#4ecdc4']" />

<!-- 径向渐变 -->
<zv-text-gradient text="径向渐变文本" type="radial" :colors="['#6bcb77', '#ff6b6b']" />

<!-- 锥形渐变 -->
<zv-text-gradient text="锥形渐变文本" type="conic" :colors="['#4d96ff', '#00d4ff', '#ffd93d']" />

<!-- 自定义颜色位置 -->
<zv-text-gradient
  text="自定义位置渐变"
  :colors="[
    { color: '#ff0000', offset: '0%' },
    { color: '#ffff00', offset: '30%' },
    { color: '#00ff00', offset: '60%' },
    { color: '#0000ff', offset: '100%' }
  ]"
/>

<!-- 彩虹预设 -->
<zv-text-gradient text="彩虹渐变效果" preset="rainbow" />

<!-- 直接传 CSS 渐变 -->
<zv-text-gradient text="自定义" gradient="linear-gradient(90deg, red, blue)" />

参数

说明

依赖 background-clip: text，H5 / App 支持较好；部分小程序基础库较低时可能显示为 fallbackColor。

实际效果请查看小程序或app

小程序示例	app示例