Source: vue-imready/src/vue-imready/useImReady.ts

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