vue系列开发2---一个ripple点击效果插件

72 阅读 0 评论 48 点赞

我是靠谱客的博主完美金鱼，最近开发中收集的这篇文章主要介绍vue系列开发2---一个ripple点击效果插件，觉得挺不错的，现在分享给大家，希望可以做个参考。

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系列开发2---一个ripple点击效果插件的全部内容，希望文章能够帮你解决vue系列开发2---一个ripple点击效果插件所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。