代码拉取完成，页面将自动刷新
Make any element easily have a Material Design-style click "ink ripple" effect.
yarn add vue-touch-ripple
npm install vue-touch-ripple --save
<template>
<touch-ripple
color="#fff"
:opacity="0.4"
transition="ease-out"
:duration="400"
:keep-last-ripple="true"
@touch="log('touch', $event)"
@click="log('click', $event)"
@start="log('ripple-start', $event)"
@end="log('ripple-end', $event)"
>
<!-- your content element -->
<div class="content">Target content</div>
</touch-ripple>
</template>
<script>
import { defineComponent } from 'vue'
import { TouchRipple } from 'vue-touch-ripple'
import 'vue-touch-ripple/style.css'
export default defineComponent({
components: {
TouchRipple
},
methods: {
log: console.log
}
})
</script>
import { createApp } from 'vue'
import VueTouchRipple from 'vue-touch-ripple'
import 'vue-touch-ripple/style.css'
const app = createApp()
app.use(VueTouchRipple, {
// optional default global options
color: 'red',
opacity: 0.5,
duration: 280,
transition: 'ease',
keepLastRipple: false
})
| prop | description | type | default |
|---|---|---|---|
| color | Specify the background color of the ripple layer, supporting any legal color value such as RGBA. | String |
#fff |
| opacity | Transparency of ripple layers, supporting numbers from 0 ~ 1. |
Number |
0.3 |
| duration | Duration of single ripple motion, time in milliseconds. | Number |
380 |
| transition | Ripple motion animation curve with Bezier curve value support. | String |
ease-out |
| keepLastRipple | whether to keep the last ripple (if true, the last ripple will always be present until the mouse button is released) |
Boolean |
true |
| event | description | params |
|---|---|---|
| touch | When the component is pressed by the left mouse button. | (event: MouseEvent) |
| click | When the component is lifted by the left mouse button. | (event: MouseEvent) |
| start | When the animated animation of each ripple starts. | (id: number) |
| end | When the animated motion of each ripple ends. | (id: number) |
BTW: if you expect to bind more flexible events on the component, in Vue3 you can just bind the events directly, instead of using the @xxx.native modifier in Vue2.
Detailed changes for each release are documented in the release notes.
Licensed under the MIT License.
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
1. 开源生态
2. 协作、人、软件
3. 评估模型