35 lines
967 B
JavaScript
35 lines
967 B
JavaScript
const Ripple = {
|
|
mounted(el, binding) {
|
|
el.style.position = 'relative';
|
|
el.style.overflow = 'hidden';
|
|
|
|
el.addEventListener('click', function (e) {
|
|
const rect = el.getBoundingClientRect();
|
|
const x = e.clientX - rect.left;
|
|
const y = e.clientY - rect.top;
|
|
|
|
const circle = document.createElement('span');
|
|
const diameter = Math.max(rect.width, rect.height);
|
|
const radius = diameter / 2;
|
|
|
|
circle.style.width = circle.style.height = `${diameter}px`;
|
|
circle.style.left = `${x - radius}px`;
|
|
circle.style.top = `${y - radius}px`;
|
|
circle.classList.add('ripple');
|
|
|
|
// Allow custom color via directive value
|
|
if (binding.value && typeof binding.value === 'string') {
|
|
circle.style.backgroundColor = binding.value;
|
|
}
|
|
|
|
el.appendChild(circle);
|
|
|
|
setTimeout(() => {
|
|
circle.remove();
|
|
}, 600); // Match animation duration
|
|
});
|
|
}
|
|
};
|
|
|
|
export default Ripple;
|