@whitesev/utils 2.2.2 → 2.2.4

package/dist/types/src/Utils.d.ts

@@ -1029,6 +1029,13 @@ declare class Utils {
          */
         callback: MutationCallback;
     }): MutationObserver;
+    /**
+     * 使用观察器观察元素出现在视图内，出现的话触发回调
+     * @param target 目标元素
+     * @param callback 触发的回调
+     * @param options 观察器配置
+     */
+    mutationVisible(target: Element | Element[], callback: (entries: IntersectionObserverEntry[], observer: IntersectionObserver) => void, options?: IntersectionObserverInit): void;
     /**
      * 去除全局window下的Utils，返回控制权
      * @example

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@whitesev/utils",
-  "version": "2.2.2",
+  "version": "2.2.4",
   "description": "一个常用的工具库",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

package/src/Utils.ts

@@ -2519,6 +2519,47 @@ class Utils {
 		}
 		return mutationObserver;
 	}
+	/**
+	 * 使用观察器观察元素出现在视图内，出现的话触发回调
+	 * @param target 目标元素
+	 * @param callback 触发的回调
+	 * @param options 观察器配置
+	 */
+	mutationVisible(
+		target: Element | Element[],
+		callback: (
+			entries: IntersectionObserverEntry[],
+			observer: IntersectionObserver
+		) => void,
+		options?: IntersectionObserverInit
+	) {
+		if (typeof IntersectionObserver === "undefined") {
+			throw new TypeError("IntersectionObserver is not defined");
+		}
+		if (target == null) {
+			throw new TypeError("mutatuinVisible target is null");
+		}
+		let defaultOptions: IntersectionObserverInit = {
+			root: null,
+			rootMargin: "0px 0px 0px 0px",
+			threshold: [0.01, 0.99],
+		};
+		defaultOptions = this.assign(defaultOptions, options || {});
+		let intersectionObserver = new IntersectionObserver((entries, observer) => {
+			if (entries[0].isIntersecting) {
+				if (typeof callback === "function") {
+					callback(entries, observer);
+				}
+			}
+		}, defaultOptions);
+		if (Array.isArray(target)) {
+			target.forEach((item) => {
+				intersectionObserver.observe(item);
+			});
+		} else {
+			intersectionObserver.observe(target);
+		}
+	}
 	/**
 	 * 去除全局window下的Utils，返回控制权
 	 * @example