@ifreeovo/highlight-dom
Version:
实现类似dom-inspector的高亮效果
92 lines (91 loc) • 2.96 kB
TypeScript
import type { ElementInfo, InlineStyle, DOMElement } from './dom';
import PluginManager from './plugin';
export interface OverlayOptions {
zIndex?: number;
portal?: DOMElement;
cache?: boolean;
hash?: string;
pluginManager?: PluginManager;
}
export interface InspectorData {
domInspector: InlineStyle;
domInspectorContent: InlineStyle;
domInspectorPaddingTop: InlineStyle;
domInspectorPaddingBottom: InlineStyle;
domInspectorPaddingLeft: InlineStyle;
domInspectorPaddingRight: InlineStyle;
domInspectorBorderTop: InlineStyle;
domInspectorBorderBottom: InlineStyle;
domInspectorBorderLeft: InlineStyle;
domInspectorBorderRight: InlineStyle;
domInspectorMarginTop: InlineStyle;
domInspectorMarginBottom: InlineStyle;
domInspectorMarginLeft: InlineStyle;
domInspectorMarginRight: InlineStyle;
}
export interface TipsData {
tagName: string;
id: string;
classNames: string;
size: string;
tipsClass: string;
style: string;
left: `${string}px`;
}
export type OverlayData = InspectorData & TipsData;
export declare function styled(styles: TemplateStringsArray, ...interpolations: any[]): string;
/**
* @example
* 例如样式为'.demo {color: red;}'，hash值为abc，则样式会转成'.demo-abc {color: red;}'
*/
export declare function transformCss(css: string, hash?: string): string;
declare class Overlay {
#private;
static instance?: Overlay;
zIndex: number;
/**
* @remark 防止通用样式与项目样式冲突用的hash
*/
hash?: string;
fragments: string;
/**
* @remark inspector挂载在页面里的位置
*/
portal: DOMElement;
/**
* @remark 存放所有inspector的容器
*/
container?: HTMLElement;
pluginManager: PluginManager;
cache: boolean;
style: string;
tipFontSize: string;
tipBackgroundColor: string;
tipTagColor: string;
tipIdColor: string;
tipClassColor: string;
tipLineColor: string;
tipSizeColor: string;
marginBackgroundColor: string;
borderBackgroundColor: string;
paddingBackgroundColor: string;
contentBackgroundColor: string;
private constructor();
static getInstance(options: OverlayOptions): Overlay;
defineDefaultTheme(hash?: string): string;
createOverlayStyle(hash?: string): void;
clearCache(): void;
removeContainer(): void;
createContainer(): void;
createInspector(data: OverlayData): string;
createTips(data: OverlayData): string;
createWrap(content: string): string;
defineTemplate(): (data: OverlayData) => string;
render(templateFn: (data: OverlayData) => string, data: OverlayData): string;
getInspectorData(elementInfo: ElementInfo): InspectorData;
getTipsData(elementInfo: ElementInfo): TipsData;
getData(elementInfo: ElementInfo): OverlayData;
create(ele: DOMElement): void;
mount(): void;
}
export default Overlay;