更新记录

1.0.1（2025-11-04） 下载此版本

更新示例

1.0.0（2025-11-04） 下载此版本

首次上传

平台兼容性

其他

uniapp 流动边框动画组件（GlowBox）

一款支持自定义颜色、速度、尺寸的 Uniapp 边框流动动画组件，专为循环列表场景优化，避免多实例冲突。

效果预览

（建议放动图，更直观）

安装方式

方式1：插件市场导入（推荐）

1. 打开 Uniapp 插件市场，搜索「GlowBox」
2. 在你的 Uniapp 项目中，「插件市场 → 导入插件」，选择本插件

方式2：手动导入

1. 下载插件包，解压后将 components/bl-glowbox/bl-glowbox 复制到你的项目 components 目录
2. 在需要使用的页面或全局注册

使用示例

1. 全局注册（main.js）

import Vue from 'vue'
import LogisticsBox from '@/components/bl-glowbox/bl-glowbox'
Vue.use(LogisticsBox)

<bl-glowbox class="demo-box" >
    <text class="box-text">默认样式</text>
</bl-glowbox>   

<!-- 示例2：自定义边框+流光颜色 -->
<LogisticsBox class="demo-box" :borderWidth="4" :flowWidth="4" borderColor="#ff6600" :flowGap="10" :glowColors="['#fff', '#ffcc00', '#ff6600', '#e63946']">
    <text class="box-text">设置边框宽度，内外变间距，边框颜色</text>
</bl-glowbox>

<!-- 示例3：自定义速度+尺寸 -->
<bl-glowbox class="demo-box" borderColor="#00cc99" animationDuration="3" width="55%" height="10%">
    <text class="box-text">宽高设置百分比，流速</text>
</bl-glowbox>
<bl-glowbox class="demo-box" borderColor="#00cc99" animationDuration="3" width="300rpx" height="100px">
    <text class="box-text">宽高rpx单位</text>
</bl-glowbox>