时间戳

首页 > 解决方案 > 对任何元素的 Vue 和涟漪效应

javascript - 对任何元素的 Vue 和涟漪效应

问题描述

我怎样才能将这种连锁反应重新制作为不总是DIV？我举个例子

当我以这种方式使用它时：

<ripple class="btn">send</ripple>

这就是它的工作原理，但是当我想使用一个按钮时，它总是变成 div。有什么办法可以这样使用它吗？

<div class="ripple">div example</div>
<button type="submit" class="ripple></button>

或者只是在任何元素上使用它。没有自动更改div？接下来，当我单击并按住时，效果会在一瞬间自动消失。怎么办才能顺利消失？

有人可以帮我吗？

标签： javascripthtmlvue.js

解决方案

它始终是 div，因为在波纹组件的模板中，包装标签是 div。您可以将其更改为您要使用的其他标签。

至于消失效果，你可以设置一个定时器，点击后即使按住也开始消失。像这样：

addRipple(e) {
  ...
  setTimeout(this.purgeRipples, 600)
},

推荐阅读