Vue和涟漪效应对任何元素的影响

Question

如何重新制作this ripple effect，使其不总是成为 DIV ？我会举一个例子

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

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

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

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

或者仅在任何元素上使用它。没有自动更改为div？接下来，当我单击并按住时，效果会在瞬间自动消失。如何使其平滑消失？

有人可以帮我吗？

Answer 1

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

关于消失效果，您可以设置单击计时器以单击，即使您按住也可以开始消失。 像这样：

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