Tengo muchos elementos en los que @mouseenter establece un valor en true y @mouseleave lo establece en false . Básicamente, lo que necesito es una forma de establecer una variable reactiva en true si el mouse pasa el elemento.
He estado tratando de descubrir cómo escribir dicha custom directive de los documentos , pero solo menciona cómo usar .focus() js function en un elemento. ¿Qué funciones js se usarían para dicha directiva?
Algo como:
const vHover = { mounted: (el) => { el.addEventListener('mouseenter', state.hover=true) el.addEventListener('mouseleave', state.hover=false) } }Creo que podrías hacer algo como:
app.directive('hover', { created(el, binding) { const callback = binding.value el.onmouseenter = () => callback(true) el.onmouseleave = () => callback(false) }, unmounted(el) { el.onmouseenter = null el.onmouseleave = null } })Modelo:
<button v-hover="onHoverChange">Example</button>Métodos:
onHoverChange(isHovered) { console.log(isHovered) }Creo que este no es el uso previsto de las directivas. El valor del estado no puede ser mutado dentro de la directiva. Puede pasar la variable a través del binding , pero no puede actualizarla.
vinculante: un objeto que contiene las siguientes propiedades.
value: El valor pasado a la directiva. Por ejemplo, en v-my-directive="1 + 1", el valor sería 2.oldValue: el valor anterior, solo disponible en beforeUpdate y actualizado. Está disponible tanto si el valor ha cambiado como si no.
así que si haces el.addEventListener('mouseenter', binding.hover=true) , como habrás notado, no actualizará el estado.
Sin embargo, si usamos los internos (PSA: aunque no se recomienda ya que podrían cambiar en cualquier momento ), podría obtener una instancia usando vnode y usar binding.arg para indicar qué Proxy ( state )
para que pueda obtener la variable reactiva con vnode.el.__vueParentComponent.data[binding.arg]
<script> export default { data(){ return { state: { hover:false } } }, directives: { hover: { mounted(el, binding, vnode) { el.addEventListener('mouseenter', () => { vnode.el.__vueParentComponent.data[binding.arg].hover = true }) el.addEventListener('mouseleave', () => { vnode.el.__vueParentComponent.data[binding.arg].hover = false }) }, } } } </script> <template> <h1 v-hover:state="state">HOVER {{ state }}</h1> </template> por supuesto, es posible que desee agregar el unmounted e incluso considerar agregar mouseleave dinámicamente solo cuando se dispara mouseenter