WL-Ripple 一个基于 UniApp 框架的自定义水波纹动画组件，适用于微信小程序、H5 等多平台。支持显示本地图片、网络图片、自定义 View 和图标内容，提供灵活的尺寸、边距和颜色配置。 项目介绍 WL-Ripple 是一个轻量级的 Vue 组件，设计用于在 UniApp 项目中实现圆形水波纹动画效果。组件支持多种内容类型（图片、图标、自定义 View），并允许用户自定义组件大小、水波纹扩散范围、背景颜色和内容样式。适用于需要动态视觉效果的场景，如按钮、头像或图标动画。 作者: WL联系方式: QQ: 459118272

用法

import WlRipple from '@/components/WlRipple/WlRipple.vue'; // 确保组件路径正确

components: {
	WlRipple // 局部注册组件
},

<view class="demo-section">
	<text class="demo-title">本地图片（小尺寸）</text>
	<wl-ripple
		:wlType="true"
		customContent="static/logo.png"
		contentType="image"
		rippleColor="#FFF"
		rippleEffectColor="rgba(0,128,0,0.1)"
		:width="50"
		:height="50"
		:contentPadding="10"
		:maxRippleSize="40"
		@image-error="onImageError"
	/>
</view> 
<!-- 网络图片：中等尺寸，红色主题 -->
<view class="demo-section">
	<text class="demo-title">网络图片</text>
	<wl-ripple
		:wlType="false"
		customContent="https://picsum.photos/200"
		contentType="image"
		rippleColor="#F0F0F0"
		rippleEffectColor="rgba(255,0,0,0.1)"
		:width="80"
		:height="80"
		:contentPadding="5"
		:maxRippleSize="60"
		@image-error="onImageError"
	/>
</view> 
<!-- 自定义 View：蓝色主题，较大边距 -->
<view class="demo-section">
	<text class="demo-title">自定义 View</text>
	<wl-ripple
		:wlType="true"
		contentType="view"
		rippleColor="#E6F3FF"
		rippleEffectColor="rgba(0,0,255,0.1)"
		:width="120"
		:height="120"
		:contentPadding="20"
		:maxRippleSize="80"
	>
		<template #custom-content>
			<view style="font-size: 24px; color: blue;">自定义</view>
		</template>
	</wl-ripple>
</view>

<!-- 图标：绿色主题，Unicode 字符 -->
<view class="demo-section">
	<text class="demo-title">图标</text>
	<wl-ripple
		:wlType="true"
		customContent="✔"
		contentType="icon"
		rippleColor="#FFF"
		iconColor="#008000"
		rippleEffectColor="rgba(0,128,0,0.1)"
		:width="100"
		:height="100"
		:contentPadding="10"
		:maxRippleSize="80"
	/>
</view>