波纹指令
v-ripple
指令用于显示用户的操作。它可以应用于任何块级元素。许多组件都内置了波纹指令,如v-btn
, v-tabs-item
等。
使用
只要在组件或 HTML 元素上使用 v-ripple
指令,就可以启用基本的 ripple 功能
API
指令 | 描述 |
---|---|
v-ripple | 波纹指令 |
示例
传播
如果多个元素有 ripple directive(纹波指令)应用,只有内部的一个将显示效果。这也可以通过使用v-ripple.stop
在没有可见纹波的情况下完成。如果点击内部元素,则停止以防止外部元素出现波纹。v-ripple.stop
并不会像其他解决方法那样停止鼠标下移/触点启动事件的传播。
选项
Center (中心)
当使用 center
选项时,始终会从目标的中心处产生波纹。
Misc (其他)
Custom color (自定义色彩)
您可以使用辅助器类改变波纹的颜色。
Ripple in components (组件中的波纹)
一些组件提供了ripple
(涟漪道具),允许您控制涟漪效应。您可以通过使用class
or center
选项关闭它或自定义行为。