Vue自定义指令完成鼠标点击水波纹效果

waves.jpg

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中增加相应样式即可

发布评论
还没有评论,快来抢沙发吧!