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