Source: vue2-imready/src/useImReady.ts

  1. import { useLegacyReactive, ReactiveLegacyAdapterResult } from "@cfcs/vue2";
  2. import { ImReadyReactiveProps, REACTIVE_IMREADY } from "@egjs/imready";
  3. import { ref, Ref } from "@vue/composition-api";
  4. export interface VueImReadyResult extends ReactiveLegacyAdapterResult<typeof REACTIVE_IMREADY> {
  5. register<T extends HTMLElement>(ref?: Ref<T | null | undefined>): Ref<T | null | undefined>;
  6. }
  7. /**
  8. * Vue hook to check if the images or videos are loaded.
  9. * @ko 이미지와 비디오들이 로드가 됐는지 체크하는 Vue hook.
  10. * @memberof Vue2ImReady
  11. * @param - Vue ImReady's props <ko> Vue ImReady의 props.</ko>
  12. * @example
  13. * ```js
  14. * import { useImReady } from "@egjs/vue2-imready";
  15. *
  16. * setup() {
  17. * const im = useImReady({
  18. * selector: "img",
  19. * });
  20. *
  21. * return {
  22. * im,
  23. * container: im.register(),
  24. * }
  25. * }
  26. * // {{im.readyCount}}
  27. * // &lt;div v-bind:ref="container"&gt;&lt;/div&gt;
  28. * ```
  29. */
  30. export function useImReady(props: Partial<ImReadyReactiveProps> = {}): VueImReadyResult {
  31. const result = useLegacyReactive(REACTIVE_IMREADY, () => props);
  32. return Object.assign(result, {
  33. register<T extends HTMLElement>(refOption: Ref<T | null | undefined> = ref()): Ref<T | null | undefined> {
  34. result.add(refOption as any);
  35. return refOption;
  36. },
  37. });
  38. }
comments powered by Disqus