Passa il mouse o passa il mouse su vue.js

104

Vorrei mostrare un div quando si passa con il mouse su un elemento in vue.js. Ma non riesco a farlo funzionare.

Sembra che non ci siano eventi per il passaggio del mouse o il passaggio del mouse in vue.js. È proprio vero?

Sarebbe possibile combinare i metodi jquery hover e vue?

javascript vue.js

— Anders Andersen
fonte

2

La direttiva v-on funziona anche per l'evento "hover". Se aggiungi alla tua domanda il codice che hai scritto, probabilmente possiamo aiutarti a farlo funzionare. E sì, Vue è semplice e piccolo e pensato per essere integrato con altri pacchetti come jQuery.

— David K. Hess

93

Ecco un esempio funzionante di ciò che penso tu stia chiedendo.

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
fonte

26

non funziona con la versione più recente di vue. @CYB ha provato a modificare la tua risposta v-on:mouseover="mouseOver"ma non ha menzionato in quale versione di vue è cambiata la sintassi

— Aprillion

2

@NICO ha una soluzione migliore della mia e funziona con la versione corrente (1.0.26 al momento di questo post). Si prega di fare riferimento alla sua risposta. Grazie.

— Jarrod

1

Vorrei eliminare questo dato che ho appena affermato, il post qui sotto di @NICO è migliore del mio e più aggiornato. Per favore, dai a NICO la risposta corretta e io cancellerò la mia. Grazie!

— Jarrod

2

l'esempio è rotto?

— user3743266

3

Penso che sia meglio usare la mano corta @mouseover:mouseover

— Davod Aslanifakor

176

sento che le logiche di cui sopra per hover non sono corrette. è solo inverso quando il mouse passa. ho usato sotto il codice. sembra funzionare perfettamente bene.

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

su istanza di vue

data : {
    upHere : false
}

spero che aiuti

— shakee93
fonte

15

Questa dovrebbe essere la risposta accettata! La risposta accettata e quella più votata risultano in una componente tremolante. Ogni movimento del cursore sul @ mouseover-div inverte lo stato corrente ...

— Stefan Medack

Se stai mostrando un div nascosto come un fumetto, inizierai a lampeggiare al passaggio del mouse. Basta aggiungere lo stesso fantastico codice per mouseover / mouseleave anche al div nascosto.

— mcmacerson

Per me funziona, con webpack non resta che modificare i dati come:data: () => ({ upHere: false })

— Emile Cantero

77

Non c'è bisogno di un metodo qui.

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
fonte

10

Puoi utilizzare v-on:mouseovero la scorciatoia @mouseoversecondo i documenti vuejs.org/guide/syntax.html#v-on-Shorthand

— nu everest

1

È possibile sostituire oncon v-on:o @per uno qualsiasi degli attributi dell'evento HTML. w3schools.com/tags/ref_eventattributes.asp

— nu everest

Qual è il problema? Questo funziona e dovrebbe essere contrassegnato come risposta corretta.

— NICO

Vue 2.2.0 non piace questo - sputa un avvertimento "[Vue warn]: non montare Vue su <html> o <body> - monta invece su elementi normali."

— Dima Fomin

Per semplicità ho creato <body> un'istanza di vue. Ovviamente non dovresti farlo nella tua applicazione del mondo reale.

— NICO

25

Per mostrare elementi figlio o fratello è possibile solo con CSS. Se si utilizza :hoverprima di combinatori ( +, ~, >, space). Quindi lo stile non si applica all'elemento al passaggio del mouse.

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
fonte

1

L'interrogante chiede specificamente di vue.js. Poiché consente di associare facilmente javascript all'evento mouseover.

— nu everest

5

Sto usando Vue e questa è la soluzione migliore per me. Ho un elenco nidificato con pulsanti che dovrebbero apparire solo al passaggio del mouse e l'utilizzo di variabili aggiuntive per monitorare lo stato del passaggio del mouse è eccessivo. I CSS sono molto più eleganti. Grazie qsc!

— david_nash

13

Con mouseoveremouseleave eventi è possibile definire una funzione di commutazione che implementa questa logica e reagisce sul valore nel rendering.

Controlla questo esempio:

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>

Espandi lo snippet

— fitorec
fonte

I postprocessori css, ad esempio purgecss, non saranno in grado di prendere le tue classi se le crei dinamicamente in questo modo. meglio:@mouseover="btn-color='btn-warning' @mouseleave="btn-color='btn-primary' :class="btn btn-block { btn-color}"

— Erich

7

Con mouseoversolo l'elemento rimane visibile quando il mouse lascia l'elemento al passaggio del mouse, quindi ho aggiunto questo:

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

<script>
export default {
  data(){
   return {
     active: false
   }
 }
</script>

— besthost
fonte

6

È possibile attivare o disattivare una classe al passaggio del mouse rigorosamente all'interno del modello di un componente, tuttavia, non è una soluzione pratica per ovvie ragioni. Per la prototipazione, d'altra parte, trovo utile non dover definire proprietà dei dati o gestori di eventi all'interno dello script.

Ecco un esempio di come puoi sperimentare con i colori delle icone 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>

Espandi lo snippet

— DigitalDrifter
fonte

2

Mi è venuto in mente lo stesso problema e l'ho risolto!

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

Espandi lo snippet

— LittleStupid
fonte

2

C'è un JSFiddle funzionante corretto: http://jsfiddle.net/1cekfnqw/176/

<p v-on:mouseover="mouseOver" v-bind:class="{on: active, 'off': !active}">Hover over me!</p>

— funkvn
fonte

1

Anche se darei un aggiornamento usando la nuova composizione api.

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>

Funzione di composizione riutilizzabile

La creazione di una useHoverfunzione ti consentirà di riutilizzarla in qualsiasi 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
}

Ecco un rapido esempio di chiamata della funzione all'interno di un componente 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>

Puoi anche usare una libreria come quella @vuehooks/coreche include molte funzioni utili, tra cui useHover.

— jsbroks
fonte

0

Ecco un esempio molto semplice per MouseOver e 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
fonte

0

Si prega di dare un'occhiata al Vue-passaggio del mouse pacchetto se siete non soddisfatto come funziona questo sguardo di codice:

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

vue-mouseover fornisce una v-mouseoverdirettiva che aggiorna automaticamente la proprietà del contesto dati specificata quando il cursore entra o esce da un elemento HTML a cui è collegata la direttiva.

Per impostazione predefinita, nel prossimo esempio la isMouseoverproprietà sarà truequando il cursore si trova su un elemento HTML e falsealtrimenti:

<div v-mouseover="isMouseover" />

Anche per impostazione predefinita isMouseoversarà inizialmente assegnato quando v-mouseoverè attaccato divall'elemento, quindi non rimarrà non assegnato prima del primo mouseenter/mouseleave evento.

Puoi specificare valori personalizzati tramite la v-mouseover-valuedirettiva:

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

o

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

I valori predefiniti personalizzati possono essere passati al pacchetto tramite l' oggetto opzioni durante l'installazione.

— N. Kudryavtsev
fonte