Material Ripples

Quasar 提供了v-ripple指令，您可以使用它轻松的为 DOM/组件添加一个 Material design 中的涟漪动画（点击元素后有一个水波效果）

WARNING

不要在已经有涟漪效果的组件中使用此指令，（例如： QBtn），他们都有一个ripple属性来控制涟漪效果。

Ripple API

Ripple API
quasar.config.js > framework > config >
ripple
Definition
early
: Boolean
说明
在用户交互时立即触发
stop
: Boolean
说明
停止点击/触摸事件的传播
center
: Boolean
说明
涟漪从绝对中心开始
color
: String
说明
来自 Quasar 颜色调色板的颜色名称；覆盖默认的动态颜色
keyCodes
: Array | Number
说明
应该触发涟漪效果的 keyCode 列表

用法

WARNING

使用前，请确保目标 DOM/组件设置了position: relative CSS，或者直接使用 relative-position Quasar CSS 辅助类。

基础

<template>
  <div class="q-pa-md row justify-center">
    <div
      v-ripple
      class="relative-position container flex flex-center text-white"
      :class="classes"
    >
      Click/tap me
    </div>
  </div>
</template>
Click/tap me

着色

Material Ripple 默认采用文本的 CSS 颜色，但这是可配置的：

<template>
  <div class="q-pa-md column items-center">
    <div
      v-ripple:purple
      class="relative-position container bg-grey-3 text-black flex flex-center"
    >
      Purple colored ripple
    </div>

    <div
      v-ripple="{ color: 'yellow' }"
      class="relative-position container bg-cyan text-white flex flex-center q-mt-sm"
      style="height: 50px"
    >
      Yellow colored ripple
    </div>

    <div
      v-ripple
      class="relative-position container bg-purple text-yellow flex flex-center q-mt-sm"
      style="height: 50px"
    >
      Inheriting text color
    </div>
  </div>
</template>
Purple colored ripple
Yellow colored ripple
Inheriting text color

定位

您也可以配置涟漪效果从何处展开，默认从点击处展开，您可以配置始终从 DOM 中心展开：

<template>
  <div class="q-pa-md q-gutter-md row justify-center">
    <div
      v-ripple.center
      class="relative-position container bg-grey-3 text-black inline flex flex-center"
    >
      Center
    </div>

    <div
      v-ripple
      class="relative-position container bg-grey-3 text-black inline flex flex-center text-center"
    >
      Touch point<br>(default)
    </div>
  </div>
</template>
Center
Touch point
(default)

提前触发

默认情况下，Ripple 指令在点击或按键时被触发。但是，您可以更改它并使其在第一次用户交互(mousedown, touchstart, keydown)时更早的触发。请注意，在大多数情况下，事件集可能会重叠(第一次和最后一次用户交互之间的小延迟)，用户的感知没有差异，但在某些情况下，这可能会导致误导用户。

这在触摸屏上尤其明显，如果用户在触控启动后不小心移动了手指，它有时会被解释为一个非常小的滚动事件，而不是点击事件，所以点击事件没有被触发，但仍然有一个波纹。

<template>
  <div class="q-pa-md column items-center">
    <div
      v-ripple.early
      class="relative-position container bg-grey-3 text-black flex flex-center"
    >
      I have ripple triggering early
    </div>

    <div
      v-ripple="{ early: true }"
      class="relative-position container bg-cyan text-white flex flex-center q-mt-sm"
      style="height: 50px"
    >
      I too have ripple triggering early
    </div>
  </div>
</template>
I have ripple triggering early
I too have ripple triggering early

禁用

如果出于某些原因，您有一个场景需要禁用波纹，那么您可以为指令分配一个布尔值，来开启/禁用它

<template>
  <div class="q-pa-md column items-center">
    <div
      v-ripple="state"
      class="relative-position container bg-cyan text-black flex flex-center"
    />

    <q-toggle v-model="state" label="Use ripple for container above" class="q-mt-md" />
  </div>
</template>
Use ripple for container above

视频讲解

若仍有疑惑，请观看视频讲解

查看更多？
Vue 指令
Intersection 交叉
Vue 指令
Mutation 突变
发现了一处错误？帮助改进提交问题
Privacy Policy | Quasar Artwork
版权声明 本中文文档内容版权为站长个人所有，保留所有权利。
免责声明 本站点所包含的任何跳转链接均为第三方广告内容，站点对这些广告内容的准确性、合法性、真实性不承担任何责任。用户点击跳转链接进入第三方网站后，应自行判断广告内容的真实性和合法性，并自行承担因使用广告内容而产生的风险和责任。任何因使用第三方广告内容而导致的损失或损害，本站点概不负责。