1.封装一个vue ripple的插件。已经封装好了!可参考https://segmentfault.com/a/1190000006931367
2.使用,引入组件
<button type="button" class="btn">
这个是按钮
<ripple class="ripple" :center-ripple="false" :color="'red'" :opacity="1"></ripple>
</button>
.btn{
background: white;
border: 0;
padding: 0.5rem;
position: relative;
}
由于 touchRipple 内部都是 position:absolute 布局,使用时,需要在外部加上 position:relative
三个参数:
centerRipple 效果开始是否中间开始,boolean
color 颜色 string
opacity 透明度 string
本文介绍了一个封装好的Vue Ripple插件,展示了如何在Vue项目中实现点击按钮时的水波纹效果。提供了详细的组件使用方法及样式设置,包括如何调整水波纹的颜色、透明度等。
1001

被折叠的 条评论
为什么被折叠?



