index.ts 790 B

1234567891011121314151617181920212223242526272829303132333435363738
  1. import { provide } from 'vue'
  2. import type { InjectionKey, ObjectDirective, Ref } from 'vue'
  3. type ForwardRefSetter = <T>(el: T) => void
  4. export type ForwardRefInjectionContext = {
  5. setForwardRef: ForwardRefSetter
  6. }
  7. export const FORWARD_REF_INJECTION_KEY: InjectionKey<ForwardRefInjectionContext> =
  8. Symbol('elForwardRef')
  9. export const useForwardRef = <T>(forwardRef: Ref<T | null>) => {
  10. const setForwardRef = (el: T) => {
  11. forwardRef.value = el
  12. }
  13. provide(FORWARD_REF_INJECTION_KEY, {
  14. setForwardRef,
  15. })
  16. }
  17. export const useForwardRefDirective = (
  18. setForwardRef: ForwardRefSetter
  19. ): ObjectDirective => {
  20. return {
  21. mounted(el) {
  22. setForwardRef(el)
  23. },
  24. updated(el) {
  25. setForwardRef(el)
  26. },
  27. unmounted() {
  28. setForwardRef(null)
  29. },
  30. }
  31. }