页面调整

src/component/modules/generalDrag.vue

@@ -62,6 +62,10 @@ export default defineComponent({
 		const store = useStore();
 		const data = reactive({
 			selectIndex:0,
+			observerData:{
+				time:false as any,
+				observer:null as any,
+			},
 		})
 		const dataDom = reactive({
 			generalDragDom:null as any,
@@ -187,6 +191,7 @@ export default defineComponent({
 			let value = collItemSize.num
 			// let num = str == 'like'?value:3
 			for(let i = 0;i < collItemSize.elList.length;i++){
+				if(!collItemSize.elList[i].el)return
 				collItemSize.elList[i].el.style.left = (collItemSize.elList.length - 1 - collItemSize.elList[i].sort) % value * (collItemSize.itemStyle.width +10) + collItemSize.padding/2 + 'px';
 				collItemSize.elList[i].el.style.top = parseInt(String((collItemSize.elList.length - 1 - collItemSize.elList[i].sort) / value)) * (collItemSize.itemStyle.height +10) + 'px';
 			}
@@ -276,15 +281,30 @@ export default defineComponent({
 			}, 100);
 		}
 		onMounted(()=>{
-			window.addEventListener('resize', setItemPosition)
-			nextTick(()=>{
-				let width = (dataDom.generalDragDom.offsetWidth - collItemSize.padding) / collItemSize.num
-				collItemSize.likeStyle.width = width + 'px'
-				collItemSize.likeStyle.height = width * 1.54 + 'px' 
-			})
+			data.observerData.observer = new ResizeObserver(entries => {
+				for (let entry of entries) {
+					clearTimeout(data.observerData.time)
+					data.observerData.time = setTimeout(()=>{
+						nextTick(()=>{
+							collItemSize.num = 2
+							// if(dataDom.generalDragDom.offsetWidth > 900){
+							// 	collItemSize.num = 3
+							// }else{
+							// 	collItemSize.num = 2
+							// }
+							let width = (dataDom.generalDragDom.offsetWidth - collItemSize.padding) / collItemSize.num
+							collItemSize.likeStyle.width = width + 'px'
+							collItemSize.likeStyle.height = width * 1.54 + 'px' 
+							setItemPosition()
+						})
+					},100)
+					// const { width } = entry.contentRect;
+				}
+			});
+			data.observerData.observer.observe(dataDom.generalDragDom);
 		})
 		onBeforeUnmount(()=>{
-			window.removeEventListener('resize', setItemPosition)
+			data.observerData.observer.unobserve(dataDom.generalDragDom);
 		})
 		return{
 			...toRefs(dataDom),