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

189 阅读 0 评论 125 点赞

我是靠谱客的博主完美金鱼，这篇文章主要介绍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点击效果插件内容请搜索靠谱客的其他文章。

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