Globals Functions
@overlastic/core
内置了全局元素的定义与创建,以及层级关系的映射相关的工具。
defineGlobalElement
定义挂载节点,默认挂载 document.body
中,可传入 root
定义挂载元素,或者传入 false
不进行挂载。
ts
import { defineGlobalElement } from '@overlastic/core'
const divElement = defineGlobalElement('global-div')
// body: { <div id="global-div"> }
// divElement.id >> global-div
// root 传入 false 不进行挂载
const divElement2 = defineGlobalElement('global-div-2', false)
defineName
用于定义挂载元素的名称(id)默认会自动叠加索引。
ts
import { defineName } from '@overlastic/core'
const name1 = defineName() // unified-overlay--1
const name2 = defineName('my-id') // my-id--1
const name3 = defineName('my-id2', false) // my-id2
getIndex
用于获取当前名称的索引,用于 @overlastic/core
内部传递 index
属性。
ts
defineName() // unified-overlay--1
getIndex() // 1
defineName() // unified-overlay--2
getIndex() // 2
defineName('my-id')
getIndex('my-id') // 1
defineName('my-id')
getIndex('my-id') // 2
defineName('my-id2', false)
defineName('my-id2', false)
getIndex('my-id2') // 0