Pasar el mouse sobre vue.js o pasar el mouse

104

Me gustaría mostrar un div al pasar el cursor sobre un elemento en vue.js. Pero parece que no puedo hacerlo funcionar.

Parece que no hay ningún evento para pasar el mouse sobre vue.js. ¿Es esto realmente cierto?

¿Sería posible combinar los métodos jquery hover y vue?

javascript  vue.js 
— Anders Andersen
fuente
2
La directiva v-on también funciona para el evento "hover". Si agrega a su pregunta el código que ha escrito, probablemente podamos ayudarlo a que funcione. Y sí, Vue es simple y pequeño y está diseñado para integrarse con otros paquetes como jQuery.
— David K. Hess

Respuestas:

93

Aquí hay un ejemplo práctico de lo que creo que está pidiendo.

http://jsfiddle.net/1cekfnqw/3017/

 <div id="demo">
        <div v-show="active">Show</div>
        <div @mouseover="mouseOver">Hover over me!</div>
    </div>

var demo = new Vue({
    el: '#demo',
    data: {
        active: false
    },
    methods: {
        mouseOver: function(){
            this.active = !this.active;   
        }
    }
});
— Jarrod
fuente
26
no funciona con la versión más reciente de vue. @CYB intentó editar su respuesta, v-on:mouseover="mouseOver"pero no mencionó en qué versión de vue cambió la sintaxis
— Aprillion
2
@NICO tiene una solución mejor que la mía y funciona con la versión actual (1.0.26 en el momento de esta publicación). Consulte su respuesta. Gracias.
— Jarrod
1
Me gustaría eliminar esto ya que acabo de decir, la publicación a continuación de @NICO es mejor que la mía y está más actualizada. Por favor, déle a NICO esa respuesta correcta y eliminaré la mía. ¡Gracias!
— Jarrod
2
el ejemplo esta roto?
— user3743266
3
Creo que es mejor usar la mano corta @mouseover:mouseover
— Davod Aslanifakor
176

Me siento por encima de la lógica para que el desplazamiento sea incorrecto. es simplemente inverso cuando el mouse se desplaza. He usado el siguiente código. parece funcionar perfectamente bien.

<div @mouseover="upHere = true" @mouseleave="upHere = false" >
    <h2> Something Something </h2>
    <some-component v-show="upHere"></some-component>
</div>

en vue instancia

data : {
    upHere : false
}

Espero que ayude

— shakee93
fuente
15
¡Esta debería ser la respuesta aceptada! La respuesta aceptada y más votada resulta en un componente parpadeante. Cada movimiento del cursor en @ mouseover-div invierte el estado actual ...
— Stefan Medack
Si muestra un div oculto como un bocadillo, parpadeará al pasar el mouse. Simplemente agregue el mismo código de mouseover / mouseleave al div oculto también.
— mcmacerson
Funciona para mi, con webpack solo tienes que cambiar tus datos como:data: () => ({ upHere: false })
— Emile Cantero
77

No hay necesidad de un método aquí.

HTML

<div v-if="active">
    <h2>Hello World!</h2>
 </div>

 <div v-on:mouseover="active = !active">
    <h1>Hover me!</h1>
 </div>

JS

new Vue({
  el: 'body',
  data: {
    active: false
  }
})
— NICO
fuente
10
Puede usar v-on:mouseovero el acceso directo @mouseoversegún los documentos vuejs.org/guide/syntax.html#v-on-Shorthand
— nu everest
1
Puede reemplazar oncon v-on:o @para cualquiera de los atributos de evento html. w3schools.com/tags/ref_eventattributes.asp
— nu everest
¿Cuál es el problema? Este está funcionando y debe marcarse como la respuesta correcta.
— NICO
A Vue 2.2.0 no le gusta esto - escupe una advertencia "[Vue warn]: No monte Vue en <html> o <body> - monte en elementos normales en su lugar."
— Dima Fomin
En aras de la simplicidad, hice de <body> una instancia vue. Por supuesto, no debería hacer eso en su aplicación del mundo real.
— NICO
25

Para mostrar elementos secundarios o hermanos, solo es posible con CSS. Si utiliza :hoverantes de combinadores ( +, ~, >, space). Entonces el estilo se aplica no al elemento flotante.

HTML

<body>
  <div class="trigger">
    Hover here.
  </div>
  <div class="hidden">
    This message shows up.
  </div>
</body>

CSS

.hidden { display: none; }
.trigger:hover + .hidden { display: inline; }
— qsc vgy
fuente
1
El interlocutor pregunta específicamente sobre vue.js. Dado que permite que javascript se vincule fácilmente al evento mouseover.
— nu everest
5
Estoy usando Vue y esta es la mejor solución para mí. Tengo una lista anidada con botones que solo deberían aparecer al pasar el mouse, y el uso de variables adicionales para rastrear el estado del mouse es excesivo. CSS es mucho más elegante. Gracias qsc!
— david_nash
13

Con los eventos mouseovery mouseleavepuede definir una función de alternancia que implemente esta lógica y reaccione sobre el valor en la representación.

Mira este ejemplo:

var vm = new Vue({
	el: '#app',
	data: {btn: 'primary'}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">


<div id='app'>
    <button
        @mouseover="btn='warning'"
        @mouseleave="btn='primary'"
        :class='"btn btn-block btn-"+btn'>
        {{ btn }}
    </button>
</div>
Expandir fragmento

— Fitorec
fuente
Los postprocesadores css, por ejemplo, purgecss, no podrán recoger sus clases si las construye dinámicamente de esta manera. mejor:@mouseover="btn-color='btn-warning' @mouseleave="btn-color='btn-primary' :class="btn btn-block { btn-color}"
— Erich
7

Con mouseoversolo el elemento permanece visible cuando el mouse sale del elemento flotante, agregué esto:

@mouseover="active = !active" @mouseout="active = !active"

<script>
export default {
  data(){
   return {
     active: false
   }
 }
</script>
— besthost
fuente
6

Es posible alternar una clase en hover estrictamente dentro de la plantilla de un componente, sin embargo, no es una solución práctica por razones obvias. Para la creación de prototipos, por otro lado, me parece útil no tener que definir propiedades de datos o controladores de eventos dentro del script.

Aquí tienes un ejemplo de cómo puedes experimentar con colores de íconos usando Vuetify.

new Vue({
  el: '#app'
})
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>

<div id="app">
  <v-app>
    <v-toolbar color="black" dark>
      <v-toolbar-items>
        <v-btn icon>
          <v-icon @mouseenter="e => e.target.classList.toggle('pink--text')" @mouseleave="e => e.target.classList.toggle('pink--text')">delete</v-icon>
        </v-btn>
        <v-btn icon>
          <v-icon @mouseenter="e => e.target.classList.toggle('blue--text')" @mouseleave="e => e.target.classList.toggle('blue--text')">launch</v-icon>
        </v-btn>
        <v-btn icon>
          <v-icon @mouseenter="e => e.target.classList.toggle('green--text')" @mouseleave="e => e.target.classList.toggle('green--text')">check</v-icon>
        </v-btn>
      </v-toolbar-items>
    </v-toolbar>
  </v-app>
</div>
Expandir fragmento

— DigitalDrifter
fuente
2

¡Se me ocurrió el mismo problema y lo soluciono!

        <img :src='book.images.small' v-on:mouseenter="hoverImg">
Expandir fragmento

— Poco estúpido
fuente
1

Aunque daría una actualización usando la nueva API de composición.

Componente

<template>
  <div @mouseenter="hovering = true" @mouseleave="hovering = false">
    {{ hovering }}
  </div>
</template>

<script lang="ts">
  import { ref } from '@vue/compsosition-api'

  export default {
    setup() {
      const hoverRef = ref(false)
      return { hovering }
    }
  })
</script>

Función de composición reutilizable

La creación de una useHoverfunción le permitirá reutilizar en cualquier componente.

export function useHover(target: Ref<HTMLElement | null>) {
  const hovering = ref(false)

  const enterHandler = () => (hovering.value = true)
  const leaveHandler = () => (hovering.value = false)

  onMounted(() => {
    if (!target.value) return
    target.value.addEventListener('mouseenter', enterHandler)
    target.value.addEventListener('mouseleave', leaveHandler)
  })

  onUnmounted(() => {
    if (!target.value) return
    target.value.removeEventListener('mouseenter', enterHandler)
    target.value.removeEventListener('mouseleave', leaveHandler)
  })

  return hovering
}

Aquí hay un ejemplo rápido que llama a la función dentro de un componente de Vue.

<template>
  <div ref="hoverRef">
    {{ hovering }}
  </div>
</template>

<script lang="ts">
  import { ref } from '@vue/compsosition-api'
  import { useHover } from './useHover'

  export default {
    setup() {
      const hoverRef = ref(null)
      const hovering = useHover(hoverRef)
      return { hovering, hoverRef }
    }
  })
</script>

También puede utilizar una biblioteca como la @vuehooks/coreque viene con muchas funciones útiles, incluidas useHover.

— jsbroks
fuente
0

Aquí hay un ejemplo muy simple para MouseOver y MouseOut:

<div id="app">
   <div :style = "styleobj" @mouseover = "changebgcolor" @mouseout = "originalcolor"> 
   </div>
</div>

new Vue({
  el:"#app",
  data:{
     styleobj : {
       width:"100px",
       height:"100px",
       backgroundColor:"red"
     }
  },
  methods:{
    changebgcolor : function() {
      this.styleobj.backgroundColor = "green";
    },
    originalcolor : function() {
      this.styleobj.backgroundColor = "red";
    }
  }
});
— Hardik Raval
fuente
0

Por favor, eche un vistazo al paquete vue-mouseover si no está satisfecho con el aspecto de este código:

<div
    @mouseover="isMouseover = true"
    @mouseleave="isMouseover = false"
/>

vue-mouseover proporciona una v-mouseoverdirectiva que actualiza automáticamente la propiedad de contexto de datos especificada cuando el cursor entra o sale de un elemento HTML al que está adjunta la directiva.

Por defecto, en el siguiente ejemplo, la isMouseoverpropiedad será truecuando el cursor esté sobre un elemento HTML y en falsecaso contrario:

<div v-mouseover="isMouseover" />

También por defecto isMouseoverse asignará inicialmente cuando v-mouseoverse adjunte al divelemento, por lo que no quedará sin asignar antes del primer mouseenter/ mouseleaveevento.

Puede especificar valores personalizados a través de la v-mouseover-valuedirectiva:

<div
    v-mouseover="isMouseover"
    v-mouseover-value="customMouseenterValue"/>

o

<div
    v-mouseover="isMouseover"
    v-mouseover-value="{
        mouseenter: customMouseenterValue,
        mouseleave: customMouseleaveValue
    }"
/>

Los valores predeterminados personalizados se pueden pasar al paquete a través del objeto de opciones durante la configuración.

— N. Kudryavtsev
fuente
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.