更新记录

1.0.0（2026-04-21） 下载此版本

配置简单，支持自定义：1. 文字内容；2. 是否开启动画；3. 动画速度；4. 文字颜色；5. 文字大小；6.容器大小； 7. 环绕半径 (相对于中心点的距离)。中间被环绕部分可以添加任何事件。支持H5、小程序（vue2/vue3）、android、ios。

平台兼容性

uni-app(5.04)

文字环绕 layne-text-wrap

配置简单，支持自定义：1. 文字内容；2. 是否开启动画；3. 动画速度；4. 文字颜色；5. 文字大小；6.容器大小； 7. 环绕半径 (相对于中心点的距离)。中间被环绕部分可以添加任何事件。支持H5、小程序（vue2/vue3）、android、ios。

API

Props

• 必要数据： textContent：文字内容。

使用说明

此为vue2示例，vue3请使用vue3方式

          <!-- 示例 1: 静态环绕 -->
          <layne-text-wrap 
            text-content="Layne-text-wrap Rotating"
            :container-size="280"
            :open-rotate="false"
            :radius="100"
            text-color="#4CAF50"
            :text-size="18"
          >
            <image src="/static/logo.png" style="width: 100px; height: 100px;"></image>
          </layne-text-wrap>

          <!-- 示例 2: 带动画环绕 -->
          <layne-text-wrap 
            text-content="Layne-text-wrap Rotating"
            :rotate-speed="15"
            :container-size="250"
            text-color="#FF5722"
            :text-size="16"
          >
            <view @click="uni.showToast({
                title: 'toast'
              })"
              style="width: 120px; height: 120px; background: #f0f0f0; border-radius: 50%; display: flex; justify-content: center; align-items: center;"
            >
              <text>Center</text>
            </view>
          </layne-text-wrap>