引入 waves.css

官网传送门

因为这个css效果已经是很多年前写的了, 而且虽然也有一个vue-waves插件可以安装, 但是样式很少, 还是不能满足我的需求, 故自己动手造轮子, 丰衣足食~

首先, 在App.vue中引入waves.css

<style>
    @import '../static/css/waves.css'; 
</style>

waves.css内容如下

.waves-effect { 
    position: relative; 
    cursor: pointer; 
    overflow: hidden; 
    -webkit-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
    -webkit-tap-highlight-color: transparent; 
    vertical-align: middle; 
    z-index: 1; 
    will-change: opacity, transform; 
    /*transition: all .05s ease-out*/ 
} 
 
.waves-effect .waves-ripple { 
    position: absolute; 
    border-radius: 50%; 
    width: 20px; 
    height: 20px; 
    margin-top: -10px; 
    margin-left: -10px; 
    opacity: 0; 
    background-color: rgba(255, 255, 255, .3); 
    transition: all 0.7s ease-out; 
    transition-property: transform, opacity, -webkit-transform; 
    -webkit-transform: scale(0); 
    transform: scale(0); 
    pointer-events: none 
} 
 
.waves-effect.waves-black .waves-ripple { 
    background: rgba(0,0,0,0.2); 
} 
 
.waves-effect.waves-red .waves-ripple { 
    background-color: rgba(244,67,54,0.7) 
} 
 
.waves-effect.waves-yellow .waves-ripple { 
    background-color: rgba(255,235,59,0.2) 
} 
 
.waves-effect.waves-orange .waves-ripple { 
    background-color: rgba(255,152,0,0.7) 
} 
 
.waves-effect.waves-purple .waves-ripple { 
    background-color: rgba(156,39,176,0.7) 
} 
 
.waves-effect.waves-green .waves-ripple { 
    background-color: rgba(76,175,80,0.7) 
} 
 
.waves-effect.waves-teal .waves-ripple { 
    background-color: rgba(0,150,136,0.7) 
} 
 
.waves-effect input[type="button"],.waves-effect input[type="reset"],.waves-effect input[type="submit"] { 
    border: 0; 
    font-style: normal; 
    font-size: inherit; 
    text-transform: inherit; 
    background: none 
} 
 
.waves-notransition { 
    transition: none !important 
} 
 
.waves-circle { 
    -webkit-transform: translateZ(0); 
    transform: translateZ(0); 
} 
 
.waves-input-wrapper { 
    border-radius: 0.2em; 
    vertical-align: bottom 
} 
 
.waves-input-wrapper .waves-button-input { 
    position: relative; 
    top: 0; 
    left: 0; 
    z-index: 1 
} 
 
.waves-circle { 
    text-align: center; 
    width: 2.5em; 
    height: 2.5em; 
    line-height: 2.5em; 
    border-radius: 50%; 
    -webkit-mask-image: none 
} 
 
.waves-block { 
    display: block 
} 
 
a.waves-effect .waves-ripple { 
    z-index: -1 
}

Vue 自定义指令

官方文档

在main.js中注册全局指令waves:

Vue.directive('waves', { 
    bind: function(el, binding) { 
        el.classList.add('waves-effect'); 
        let modifiers = Object.keys(binding.modifiers)[0], duration = +binding.expression || 200; 
        !!modifiers && el.classList.add(`waves-${modifiers}`); 
        function convertStyle(obj) { 
            let style = ''; 
            for (let a in obj) { 
                if (obj.hasOwnProperty(a)) { 
                    style += `${a}:${obj[a]};` 
                } 
            } 
            return style; 
        } 
 
        el.addEventListener('mousedown', function(e) { 
            let ripple = document.createElement('div'); 
            ripple.classList.add('waves-ripple'); 
            el.appendChild(ripple); 
 
            let styles = { 
                left: `${e.layerX}px`, 
                top: `${e.layerY}px`, 
                opacity: 1, 
                transform: `scale(${(el.clientWidth / 100) * 10})`, 
                'transition-duration': `${duration}ms`, 
                'transition-timing-function': 'ease-in-out' 
            }; 
            ripple.setAttribute('style', convertStyle(styles)); 
            setTimeout(function() { 
                ripple.setAttribute('style', convertStyle({ 
                    opacity: 0, 
                    transform: styles.transform, 
                    left: styles.left, 
                    top: styles.top, 
                })); 
                setTimeout(function() { 
                    ripple && el.removeChild(ripple); 
                }, duration * 3); 
            }, duration); 
        }); 
    }, 
});

使用方法

默认波纹颜色为白色, 过渡时间为200毫秒:

<div v-waves></div>

自定义波纹颜色, 例如黄色:

<div v-waves.yellow></div>

自定义黑色:

<div v-waves.black></div>

自定义过渡时间, 单位是毫秒, 例如过渡时间为1秒:

<div v-waves.yellow="1000"></div>

不难发现, 其实波纹颜色是根据waves.css中自定义的样式变化的, 例如yellow对应的是:

.waves-effect.waves-yellow .waves-ripple { 
    background-color: rgba(255,235,59,0.2) 
}

而black则对应的是:

.waves-effect.waves-black .waves-ripple { 
    background: rgba(0,0,0,0.2); 
}

所以想要自定义各种颜色, 只需要在waves.css中增加相应样式即可