更新记录

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

appx-gradient-text 是基于 UniAppX 开发的渐变文本组件，通过 background-clip: text 实现文字渐变效果，支持自定义渐变方向、渐变颜色、字体样式等，适配小程序、H5、App 等多端场景，且提供灵活的样式自定义能力。

平台兼容性

uni-app x(4.87)

appx-gradient-text 渐变文本组件文档

组件介绍

appx-gradient-text 是基于 UniAppX 开发的渐变文本组件，通过 background-clip: text 实现文字渐变效果，支持自定义渐变方向、渐变颜色、字体样式等，适配小程序、H5、App 等多端场景，且提供灵活的样式自定义能力。

组件属性（Props）

组件事件

组件使用示例

基础使用

<template>
  <appx-gradient-text 
    text="基础渐变文本"
  />
</template>

<script lang="uts" setup>
</script>

自定义渐变方向和颜色

<template>
  <appx-gradient-text 
    text="45度渐变文本"
    gradientDirection="45deg"
    :gradientColors="['#ff6700', '#ffd100', '#ff0080']"
  />
</template>

<script lang="uts" setup>

</script>

自定义字体样式和交互

<template>
  <appx-gradient-text 
    text="可选中的渐变文本"
    fontSize="24px"
    fontWeight="bold"
    letterSpacing="2px"
    :noSelect="false"
    :textStyle="{ padding: '10px 20px' }"
    :containerStyle="{ backgroundColor: '#f5f5f5', borderRadius: '8px' }"
    @click="handleTextClick"
  />
</template>

<script lang="uts" setup>

const handleTextClick = () => {
  uni.showToast({ title: '点击了渐变文本', icon: 'none' });
};
</script>

样式传字符串格式（兼容场景）

<template>
  <appx-gradient-text 
    text="样式字符串传参"
    textStyle="{ 'color': 'red', 'padding': '5px' }"
    containerStyle="'backgroundColor': '#eee', 'margin': '10px'"
  />
</template>

<script lang="uts" setup>

</script>

注意事项

1. 渐变文本效果依赖 background-clip: text，部分低版本移动端系统/浏览器可能存在兼容问题，建议做好降级方案；
2. textStyle/containerStyle 传字符串时，需保证格式接近 JSON（组件已兼容单引号、无引号键名，但复杂格式可能解析失败），优先推荐传对象；
3. noSelect 属性的 WebkitUserSelect 适配了小程序/移动端，H5 端也可正常生效；
4. 组件容器默认是 inline-block 类型，可通过 containerStyle 修改为 block 等类型实现宽度占满。