vue自己写水波纹

引入vue

html：

 

js：代码

Vue.directive('myon', {

bind(el, binding) {

el.onclick = function (e) {

// el.style.opacity = '.5';

let x = e.clientX - el.offsetLeft;

let y = e.clientY - el.offsetTop;

let left = el.offsetLeft;

let top = el.offsetTop;

console.log(x, y, left, top);

 

let span = document.createElement('span');

span.style.pointerEvents = 'none';

span.style.position = "absolute";

span.style.left = x + 'px';

span.style.top = y + 'px';

span.style.borderRadius = '50%';

let bg = binding.value || 'rgba(0,0,0,0.5)';

span.style.background = bg;

el.append(span);

let height = 0;

let width = 0;

let opacity = 1;

let timer = setInterval(() => {

height += 2;

width += 2;

opacity -= 0.03;

span.style.left = x - span.clientWidth / 2 + 'px';

span.style.top = y - span.clientHeight / 2 + 'px';

span.style.width = width + 'px'

span.style.height = height + 'px'

span.style.opacity = opacity;

if (opacity < 0) {

clearInterval(timer);

span.remove();

}

}, 10)

}

}

})

let vm = new Vue({

}).$mount('#app')