Quasar 提供了v-ripple指令，您可以使用它轻松的为 DOM/组件添加一个 Material design 中的涟漪动画（点击元素后有一个水波效果）
WARNING
不要在已经有涟漪效果的组件中使用此指令，（例如： QBtn），他们都有一个ripple属性来控制涟漪效果。
用法
WARNING
使用前，请确保目标 DOM/组件设置了position: relative CSS，或者直接使用 relative-position Quasar CSS 辅助类。
基础
着色
Material Ripple 默认采用文本的 CSS 颜色，但这是可配置的：
定位
您也可以配置涟漪效果从何处展开，默认从点击处展开，您可以配置始终从 DOM 中心展开：
提前触发
默认情况下，Ripple 指令在点击（click）或按键抬起（keyup）时被触发。但是，您可以更改它并使其在用户首次交互（pointerdown、keydown）时更早地触发。在大多数情况下，用户感知不到差异（首次交互与最终事件之间只有极短的延迟），但在按住不放或慢速点击的场景下，提前反馈的手感更接近原生 Material 体验。
从 v2.26 开始，提前触发的涟漪在检测到交互不可能变成"点击"时会自动取消：如果浏览器接管了手势（触控点发生移动变成滚动/平移），或者按下的指针被拖离元素，涟漪会优雅地淡出。在触摸屏上，涟漪还会等待浏览器完成"轻触 vs 滚动"的判定（几毫秒）才开始绘制，因此在启用了涟漪效果的元素上快速滑动不会闪烁涟漪。
禁用
如果出于某些原因，您有一个场景需要禁用波纹，那么您可以为指令分配一个布尔值，来开启/禁用它