mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-12 12:25:22 +08:00
6503e55277
* refactor(utils-v2): migrate utils * refactor(utils-v2): migrate utils * refactor(utils-v2): migrate utils * refactor(utils): remove * refactor(utils): rename * refactor(utils): move EVENT_CODE to constants * refactor: remove generic
43 lines
1.1 KiB
TypeScript
43 lines
1.1 KiB
TypeScript
import { computed, inject, unref } from 'vue'
|
|
import { isClient } from '@vueuse/core'
|
|
import { debugWarn } from '@element-plus/utils'
|
|
|
|
import type { InjectionKey, Ref } from 'vue'
|
|
import type { MaybeRef } from '@vueuse/core'
|
|
|
|
export type ElIdInjectionContext = {
|
|
prefix: number
|
|
current: number
|
|
}
|
|
|
|
const defaultIdInjection = {
|
|
prefix: Math.floor(Math.random() * 10000),
|
|
current: 0,
|
|
}
|
|
|
|
export const ID_INJECTION_KEY: InjectionKey<ElIdInjectionContext> =
|
|
Symbol('elIdInjection')
|
|
|
|
export const useId = (deterministicId?: MaybeRef<string>): Ref<string> => {
|
|
const idInjection = inject(ID_INJECTION_KEY, defaultIdInjection)
|
|
|
|
if (!isClient && idInjection === defaultIdInjection) {
|
|
debugWarn(
|
|
'IdInjection',
|
|
`Looks like you are using server rendering, you must provide a id provider to ensure the hydration process to be succeed
|
|
usage: app.provide(ID_INJECTION_KEY, {
|
|
prefix: number,
|
|
current: number,
|
|
})`
|
|
)
|
|
}
|
|
|
|
const idRef = computed(
|
|
() =>
|
|
unref(deterministicId) ||
|
|
`el-id-${idInjection.prefix}-${idInjection.current++}`
|
|
)
|
|
|
|
return idRef
|
|
}
|