vue随笔-动态判断隐藏/移动div

写法1，点击目标div以外的任何地方隐藏

// 如果滚动条移动时，动态移动div
const scrollMove = () => {
	if(!parent) {
		return;
	}

	// 如果该下拉框处于显示状态则随父元素移动
	if(props.config.show) {
		// 需要执行的行为方法，我这边是移动（未展示）
		move();
	}
}

// 判断鼠标点击是否在div上，不在则隐藏下拉框
const clickMove = (event) => {
	// 拿到当前的目标div
	let p = main.value;
	// 点击的x、y锚点
	let x=event.clientX;
	let y=event.clientY;
	// 当前div的边缘数值位置
	let px1 = p.offsetLeft;
	let py1 = p.offsetTop;
	let px2 = p.offsetLeft + p.offsetWidth;
	let py2 = p.offsetTop + p.offsetHeight;

	if( x < px1 || x > px2 || y < py1 || y > py2) {
		// 初始化定时器容器
		props.config.show = false;
	}
}

onMounted(() => {
	window.addEventListener('scroll', scrollMove, true);
	window.addEventListener('click', clickMove, true);
});

// 离开当前组件清除监听
onBeforeUnmount(() => {
	window.removeEventListener('scroll', scrollMove, true);
	window.removeEventListener('click', clickMove, true);
});

写法2，移除目标div时隐藏

// 防抖
let fillCommodity = null;
// 判断鼠标移动是否在div上，不在则隐藏下拉框
main.value.onmouseout = function(event){
	let p = main.value;
	let x=event.clientX;
	let y=event.clientY;
	let px1 = p.offsetLeft;
	let py1 = p.offsetTop;
	let px2 = p.offsetLeft + p.offsetWidth;
	let py2 = p.offsetTop + p.offsetHeight;

	// 在div上移动清除定时器
	if (fillCommodity) {
		clearTimeout(fillCommodity);
	}

	// 超出边界则添加定时器
	if( x < px1 || x > px2 || y < py1 || y > py2) {
		// 当用户鼠标移出下拉框1秒后，自动隐藏下拉框
		fillCommodity = setTimeout(() => {
			// 初始化定时器容器
			fillCommodity = null;
			props.config.show = false;
		}, 1000)
	}
}