feat(useElementBySelector): add simple querySelector utility #4764
Conversation
| @@ -0,0 +1,12 @@ | |||
| // eslint-disable-next-line no-restricted-imports | |||
There was a problem hiding this comment.
you should remove this and use tryOnMounted from vueuse instead
| // eslint-disable-next-line no-restricted-imports | ||
| import { ref as deepRef, onMounted } from 'vue' | ||
|
|
||
| export function useElementBySelector(selector: string) { |
There was a problem hiding this comment.
If we want to merge this we should have reactivity
| export function useElementBySelector(selector: string) { | |
| export function useElementBySelector(selector: MaybeRefOrGetter<string>) { |
There was a problem hiding this comment.
Have now added reactive support for the selector argument. Great idea thanks 🙏🏻
|
|
||
| export function useElementBySelector(selector: MaybeRefOrGetter<string>) { | ||
| const el = deepRef<Element | null>() | ||
| const select = (): Element | null => el.value = document.querySelector(toValue(selector)) |
There was a problem hiding this comment.
lets do this:
| const select = (): Element | null => el.value = document.querySelector(toValue(selector)) | |
| const select = (newSelector): Element | null => el.value = document.querySelector(newSelector) |
this ensures the right value for the current watch cycle
for tryOnMounted:
tryOnMounted(()=>select(toValue(selector)))
There was a problem hiding this comment.
Please checkout the guidelines for globals like document: https://vueuse.org/guidelines.html#configurable-globals
| watch( | ||
| () => toValue(selector), | ||
| select, | ||
| { immediate: true }, |
There was a problem hiding this comment.
Please check out the Guidelines for watchers: https://vueuse.org/guidelines.html#watch-options
| immediate = true, | ||
| } = options | ||
|
|
||
| const el = deepRef<TElement | null>() |
There was a problem hiding this comment.
| const el = deepRef<TElement | null>() | |
| const el = shallowRef<TElement | null>() |
| { immediate }, | ||
| ) | ||
|
|
||
| return el |
There was a problem hiding this comment.
| return el | |
| return readonly(el) |
Before submitting the PR, please make sure you do the following
fixes #123).Description
Adds small simple utility for selecting elements using querySelector. I am opening this PR as it appears to be a common pattern used.
Pairs well with other vueuse utils. For example
useElementSize.Additional context