@58fe/p5/library/mixins/active.js

pc端vue组件

import './../styles/common/active.scss';

const addActiveDom = (el, activeColor) => {
	let fragment = document.createDocumentFragment();
	// 生成父级dom
	let dom = document.createElement('div');
	dom.className = 'p5-active';
	if (activeColor) {
		dom.style.color = activeColor;
	}
	fragment.appendChild(dom);
	// 生成子级dom
	let childDom = document.createElement('div');
	childDom.className = 'p5-active-ripple';
	dom.appendChild(childDom);
	// 添加到dom节点中
	el.appendChild(fragment);
};

const handleMounseDown = (event) => {
	let el = event.currentTarget || event.target;
	let rectObject = el.getBoundingClientRect(),
		top = event.clientY - rectObject.top,
		left = event.clientX - rectObject.left;
	// 设置元素的中心点的位置 为鼠标当前位置
	let activeDom = el.getElementsByClassName('p5-active-ripple')[0];
	activeDom.style.top = top - activeDom.offsetHeight / 2 + 'px';
	activeDom.style.left = left - activeDom.offsetWidth / 2 + 'px';
};

export default {
	created() {},
	props: {
		// 水波纹效果的动画
		activeColor: {
			type: String
		},
		// 按钮禁用的情况下 不加效果
		disabled: {
			type: String,
			default: false
		}
	},
	mounted() {
		if (this.disabled) {
			return false;
		}
		let el = this.$el;
		// 插入dom元素
		addActiveDom(el, this.activeColor);
		// 绑定事件
		el.addEventListener('click', handleMounseDown);
	},
	beforeDestroy() {
		let el = this.$el;
		el.removeEventListener('click', handleMounseDown);
	}
};