iking-utils
Version:
金合前端工具库
96 lines (95 loc) • 4.82 kB
TypeScript
export interface ViewportOffsetResult {
left: number;
top: number;
right: number;
bottom: number;
rightIncludeBody: number;
bottomIncludeBody: number;
}
/**
* 获取元素的边界矩形信息。
* @param element 指定的元素，必须是一个Element类型。
* @returns 如果元素有效且存在getBoundingClientRect方法，则返回该方法的结果，即DOMRect对象；否则返回0。
*/
export declare function getBoundingClientRect(element: Element): DOMRect | number;
/**
* 检查一个元素是否包含指定的类名。
* @param el 指定的元素，必须是一个Element类型。
* @param cls 指定的类名，是一个字符串。
* @returns 返回一个布尔值，如果元素包含指定的类名则为true，否则为false。
*/
export declare function hasClass(el: Element, cls: string): boolean;
/**
* 为指定元素添加一个或多个类名。
* @param el 指定的元素，必须是一个Element类型。
* @param cls 要添加的类名，可以是单个类名或多个类名组成的字符串，多个类名之间用空格分隔。
*/
export declare function addClass(el: Element, cls: string): void;
/**
* 从元素中移除指定的类名。
* @param el 指定的元素，必须是一个Element类型。
* @param cls 要移除的类名，可以是一个由空格分隔的多个类名的字符串。
*
* 函数首先检查传入的元素和类名是否为空，如果为空则直接返回。
* 然后将类名字符串按空格分割成数组，遍历这个数组以移除每个指定的类名。
* 对于支持 classList 属性的现代浏览器，直接使用 classList.remove 方法移除类名。
* 对于不支持 classList 的浏览器，则操作元素的 className 属性，通过字符串替换的方式移除类名。
* 最后，如果浏览器不支持 classList，将处理后的 className 赋值回元素，以确保类名的更新。
*/
export declare function removeClass(el: Element, cls: string): void;
/**
* 获取指定元素相对于视口的位置信息。
*
* @param element 需要获取位置信息的元素。
* @returns 返回一个包含元素相对于视口的位置信息的对象。
*/
export declare function getViewportOffset(element: Element): ViewportOffsetResult;
/**
* 为CSS属性生成兼容前缀的样式对象
* @param attr 需要设置的CSS属性名
* @param value 属性对应的值
* @returns 返回一个对象，该对象包含带有各种浏览器前缀的属性以及原始属性，以确保在多个浏览器中兼容
*/
export declare function hackCss(attr: string, value: string): any;
export declare function on(element: Element | HTMLElement | Document | Window, event: string, handler: EventListenerOrEventListenerObject): void;
export declare function off(element: Element | HTMLElement | Document | Window, event: string, handler: Fn): void;
export declare function once(el: HTMLElement, event: string, fn: EventListener): void;
/**
* 使用RAF节流函数封装给定的函数。
* @param fn 需要被节流的函数。
* @returns 返回一个节流后的函数。
* @template T 函数参数类型。
*/
export declare function useRafThrottle<T extends any>(fn: T): T;
/**
* 添加样式表
* @param href 样式表的URL
*/
export declare const addStyelsheet: (href: string) => void;
/**
* 获取指定元素的dataset，或者根据key获取特定的dataset值
* @param el 指定的元素，如果未提供，则默认为document.body
* @param key 需要获取的dataset的键名，如果未提供，则返回整个dataset对象
* @returns 如果提供了key，则返回对应的dataset值；否则返回整个dataset对象
*/
export declare const getDomDataset: (el: HTMLElement, key?: string) => string | DOMStringMap | undefined;
/**
* @description: 获取文本宽度
* @param {string} text
* @param {*} font 字体样式（一般只传入字体font-size值） 也可以是'14px sans-serif'等
* @return {number}
*/
export declare const useTextWidth: (text: string, font?: string) => number;
/**
* 将指定的错误表单项滚动到视图中。
* @param option 配置对象，可选参数，用于定制滚动行为。
* @param option.behavior 滚动行为，默认为 'smooth'，可选值包括 'auto', 'instant', 'smooth'。
* @param option.block 指定滚动到哪个块级元素，默认为 'end'，可选值包括 'start', 'end', 'nearest'。
* @param option.inline 指定在行内方向上滚动到哪个位置，默认为 'nearest'，可选值包括 'start', 'end', 'nearest'。
* @returns 无返回值。
*/
export declare const intoErrorView: (option?: {
behavior?: string;
block?: string;
inline?: string;
}) => void;