element-plus/packages/hooks/use-attrs/index.ts
Simona e1add47603
feat(hooks): add useAttrs hook (#317)
* feat(hooks): add useAttrs hook

* feat(hooks): undo binding class and style automatically

* test: remove unused import statement
2020-09-19 20:44:07 +08:00

38 lines
931 B
TypeScript

import {
getCurrentInstance,
reactive,
shallowRef,
watchEffect,
} from 'vue'
import { entries } from '@element-plus/utils/util'
const DEFAULT_EXCLUDE_KEYS = ['class', 'style']
const LISTENER_PREFIX = /^on[A-Z]/
export default (excludeListeners = false, excludeKeys: string[] = []) => {
const instance = getCurrentInstance()
const attrs = shallowRef({})
const allExcludeKeys = excludeKeys.concat(DEFAULT_EXCLUDE_KEYS)
// Since attrs are not reactive, make it reactive instead of doing in `onUpdated` hook for better performance
instance.attrs = reactive(instance.attrs)
watchEffect(() => {
const res = entries(instance.attrs)
.reduce((acm, [key, val]) => {
if (
!allExcludeKeys.includes(key) &&
!(excludeListeners && LISTENER_PREFIX.test(key))
) {
acm[key] = val
}
return acm
}, {})
attrs.value = res
})
return attrs
}