vue 圆形 水波_vue 开发波纹点击特效组件

最近在使用 vue2 做一个新的 material ui 库，波纹点击效果在 material design 中被多次使用到，于是决定把它封装成一个公共的组件，使用时直接调用就好啦。

开发之前的思考

常见的波纹点击效果的实现方式是监听元素的 mousedown 事件，在元素内部创建一个 波纹元素 ，并调整元素的 transform: scale(0); 到 transform: scale(1);, 通过计算点击的位置来设置 波纹元素 的大小和位置，以达到波纹扩散的效果。

我将组件分为两个部分， circleRipple.vue 和 TouchRipple.vue 各自实现不同的功能

circleRipple.vue 波纹扩散组件，完成波纹扩散的效果

TouchRipple.vue 监听 mouse 和 touch 相关事件，控制 circleRipple 的显示，位置。

circleRipple.vue

circleRipple 需要完成波纹扩展的效果，而且可以从外部控制它的大小和位置, 所以利用 vue 的 transition 动画完成效果, 提供 mergeStyle 、 color 、opacity 参数来从外部控制它的样式。实现代码如下。

import {merge} from '../utils'

export default {

props: {

mergeStyle: {

type: Object,

default () {

return {}

}

},

color: {

type: String,

default: ''

},

opacity: {

type: Number

}

},

computed: {

styles () {

return merge({}, {color: this.color, opacity: this.opacity}, this.mergeStyle)

}

}

}

@import "../styles/import.less";

.mu-circle-ripple{

position: absolute;

width: 100%;

height: 100%;

left: 0;

top: 0;

pointer-events: none;

user-select: none;

border-radius: 50%;

background-color: currentColor;

background-clip: padding-box;

opacity: 0.1;

}

.mu-ripple-enter-active,