useAttrs.ts 1.1 KB

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