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

标签 javascript html vue.js

我该如何重制this ripple effect不总是成为一个DIV?我举个例子

当我这样使用它时:

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

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

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

或者只是在任何元素上使用它。没有自动更改为div?接下来,当我点击并按住时,效果会立即自动消失。怎样才能顺利消失呢?

有人可以帮我解决这个问题吗?

最佳答案

它总是div,因为在ripple组件的模板中,包装标签是div。 您可以将其更改为您想要使用的其他标签。

关于消失效果,你可以设置一个计时器,点击后即使按住也会开始消失。 像这样:

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

关于javascript - Vue 和对任何元素的涟漪效应,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56827272/

相关文章:

javascript - 自动隐藏按钮

javascript - 如何从选择菜单中删除选项?

javascript - 没有任何错误,但按钮不起作用

javascript - 在 VUE 中切换样式时边框样式无法正确呈现

javascript - 在文件输入上使用 v-model 时出错

webpack - 在 Vue CLI 3 中使用 Extract-Text-Webpack-Plugin

javascript - 在 1 个对象中应用 jQuery 函数 live()

javascript - 更改表格中一行的颜色,html

javascript - 平滑的 Canvas 线和光标起点

javascript - 如何使网站上的 tfl 小部件变大