useAttrs.ts 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243
  1. import { type Recordable } from '@vben/types';
  2. import { getCurrentInstance, reactive, shallowRef, watchEffect } from 'vue';
  3. interface UseAttrsOptions {
  4. excludeListeners?: boolean;
  5. excludeKeys?: string[];
  6. excludeDefaultKeys?: boolean;
  7. }
  8. const DEFAULT_EXCLUDE_KEYS = ['class', 'style'];
  9. const LISTENER_PREFIX = /^on[A-Z]/;
  10. function entries<T>(obj: Recordable<T>): [string, T][] {
  11. return Object.keys(obj).map((key: string) => [key, obj[key]]);
  12. }
  13. function useAttrs(options: UseAttrsOptions = {}): Recordable<any> {
  14. const instance = getCurrentInstance();
  15. if (!instance) return {};
  16. const { excludeListeners = false, excludeKeys = [], excludeDefaultKeys = true } = options;
  17. const attrs = shallowRef({});
  18. const allExcludeKeys = excludeKeys.concat(excludeDefaultKeys ? DEFAULT_EXCLUDE_KEYS : []);
  19. // Since attrs are not reactive, make it reactive instead of doing in `onUpdated` hook for better performance
  20. instance.attrs = reactive(instance.attrs);
  21. watchEffect(() => {
  22. const res = entries(instance.attrs).reduce((acm, [key, val]) => {
  23. if (!allExcludeKeys.includes(key) && !(excludeListeners && LISTENER_PREFIX.test(key))) {
  24. acm[key] = val;
  25. }
  26. return acm;
  27. }, {} as Recordable<any>);
  28. attrs.value = res;
  29. });
  30. return attrs;
  31. }
  32. export { useAttrs, type UseAttrsOptions };