Mouseover oder Hover vue.js

104

Ich möchte ein div anzeigen, wenn ich mit der Maus über ein Element in vue.js schwebe. Aber ich kann es nicht zum Laufen bringen.

Es sieht so aus, als gäbe es in vue.js kein Ereignis für Hover oder Mouseover. Ist das wirklich wahr?

Wäre es möglich, jquery hover- und vue-Methoden zu kombinieren?

javascript vue.js Anders Andersen
quelle

2

Die v-on-Direktive funktioniert auch für das Ereignis "Schweben". Wenn Sie Ihrer Frage den von Ihnen geschriebenen Code hinzufügen, können wir Ihnen wahrscheinlich dabei helfen, ihn zum Laufen zu bringen. Und ja, Vue ist einfach und klein und soll in andere Pakete wie jQuery integriert werden.

David K. Hess

93

Hier ist ein funktionierendes Beispiel dafür, wonach Sie meiner Meinung nach fragen.

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
quelle

26

funktioniert nicht mit der neuesten vue-Version. @CYB hat versucht, Ihre Antwort zu bearbeiten, v-on:mouseover="mouseOver"aber nicht erwähnt, in welcher Version von vue sich die Syntax geändert hat

Aprillion

2

@NICO hat eine bessere Lösung als meine und funktioniert mit der aktuellen Version (1.0.26 zum Zeitpunkt dieses Beitrags). Bitte beziehen Sie sich auf seine Antwort. Danke dir.

Jarrod

1

Ich möchte dies löschen, da ich gerade gesagt habe, dass der folgende Beitrag von @NICO besser als meiner und aktueller ist. Bitte geben Sie NICO die richtige Antwort, und ich werde meine löschen. Danke dir!

Jarrod

2

Das Beispiel ist kaputt?

user3743266

3

Ich denke, verwenden Sie besser kurze Hand @mouseover:mouseover

Davod Aslanifakor

176

Ich denke, über Logik für Schwebeflug ist falsch. es ist nur umgekehrt, wenn die Maus schwebt. Ich habe unten Code verwendet. es scheint vollkommen in Ordnung zu funktionieren.

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

auf vue Instanz

data : {
    upHere : false
}

hoffentlich hilft das

Shakee93
quelle

15

Dies sollte die akzeptierte Antwort sein! Die akzeptierte und am besten bewertete Antwort führt zu einer flackernden Komponente. Jede Bewegung des Cursors auf dem @ mouseover-div kehrt den aktuellen Status um ...

Stefan Medack

Wenn Sie ein verstecktes Div wie eine Sprechblase anzeigen, flackert es beim Mouseover. Fügen Sie dem versteckten Div einfach den gleichen fantastischen Mouseover- / Mouseleave-Code hinzu.

mcmacerson

Funktioniert für mich, mit Webpack müssen Sie nur Ihre Daten ändern als:data: () => ({ upHere: false })

Emile Cantero

77

Hier ist keine Methode erforderlich.

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
quelle

10

Sie können entweder v-on:mouseoveroder die Verknüpfung @mouseovergemäß den Dokumenten vuejs.org/guide/syntax.html#v-on-Shorthand

nu everest

1

Sie können ersetzen onmit v-on:oder @für eine der HTML - Ereignisattribute. w3schools.com/tags/ref_eventattributes.asp

nu everest

Was ist das Problem? Dieser funktioniert und sollte als die richtige Antwort markiert werden.

NICO

Vue 2.2.0 gefällt das nicht - spucke eine Warnung aus "[Vue warn]: Mounte Vue nicht an <html> oder <body> - mounte stattdessen an normalen Elementen."

Dima Fomin

Der Einfachheit halber habe ich <body> zu einer vue-Instanz gemacht. Natürlich sollten Sie das in Ihrer realen Anwendung nicht tun.

NICO

25

Das Anzeigen von untergeordneten oder geschwisterlichen Elementen ist nur mit CSS möglich. Wenn Sie :hovervor combinators ( +, ~, >, space). Dann gilt der Stil nicht für schwebende Elemente.

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
quelle

1

Der Fragesteller fragt speziell nach vue.js. Da es ermöglicht, Javascript einfach an das Mouseover-Ereignis zu binden.

Nu Everest

5

Ich benutze Vue und dies ist die beste Lösung für mich. Ich habe eine verschachtelte Liste mit Schaltflächen, die nur beim Hover angezeigt werden sollen, und die Verwendung zusätzlicher Variablen zum Verfolgen des Hover-Status ist übertrieben. CSS ist viel eleganter. Danke qsc!

David_Nash

13

Mit mouseoverund mouseleaveevents können Sie eine Umschaltfunktion definieren, die diese Logik implementiert und auf den Wert im Rendering reagiert.

Überprüfen Sie dieses Beispiel:

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>

Erweitern Sie das Snippet

fitorec
quelle

CSS-Postprozessoren, z. B. purgecss, können Ihre Klassen nicht abholen, wenn Sie sie dynamisch so erstellen. besser:@mouseover="btn-color='btn-warning' @mouseleave="btn-color='btn-primary' :class="btn btn-block { btn-color}"

Erich

7

Da mouseovernur das Element sichtbar bleibt, wenn die Maus das schwebende Element verlässt, habe ich Folgendes hinzugefügt:

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

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

besthost
quelle

6

Es ist möglich, eine Klasse beim Schweben streng innerhalb der Vorlage einer Komponente umzuschalten. Dies ist jedoch aus offensichtlichen Gründen keine praktische Lösung. Für das Prototyping hingegen finde ich es nützlich, keine Dateneigenschaften oder Ereignishandler im Skript definieren zu müssen.

Hier ist ein Beispiel, wie Sie mit Vuetify mit Symbolfarben experimentieren können.

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>

Erweitern Sie das Snippet

DigitalDrifter
quelle

2

Ich hatte das gleiche Problem und arbeite es aus!

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

Erweitern Sie das Snippet

LittleStupid
quelle

2

Es gibt eine korrekt funktionierende JSFiddle: http://jsfiddle.net/1cekfnqw/176/

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

funkvn
quelle

1

Obwohl ich ein Update mit der neuen Kompositions-API geben würde.

Komponente

<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>

Wiederverwendbare Kompositionsfunktion

Durch das Erstellen einer useHoverFunktion können Sie alle Komponenten wiederverwenden.

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
}

Hier ist ein kurzes Beispiel für den Aufruf der Funktion in einer Vue-Komponente.

<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>

Sie können auch eine Bibliothek verwenden, @vuehooks/coredie viele nützliche Funktionen enthält, einschließlich useHover.

jsbroks
quelle

0

Hier ist ein sehr einfaches Beispiel für MouseOver und 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
quelle

0

Bitte schauen Sie sich das vue-mouseover- Paket an, wenn Sie nicht zufrieden sind, wie dieser Code aussieht:

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

vue-mouseover bietet av-mouseover Direktive, die die angegebene Datenkontexteigenschaft automatisch aktualisiert, wenn der Cursor ein HTML-Element betritt oder verlässt, an das die Direktive angehängt ist.

Standardmäßig wird im nächsten Beispiel die isMouseoverEigenschaft angezeigt , truewenn sich der Cursor über einem HTML-Element befindet, und falseansonsten:

<div v-mouseover="isMouseover" />

Ebenfalls standardmäßig isMouseoverwird zunächst zugewiesen , wenn v-mouseoveran das gebunden ist divElement, so wird es nicht bleiben nicht zugewiesen vor dem ersten mouseenter/ mouseleaveEreignis.

Sie können benutzerdefinierte Werte über die v-mouseover-valueDirektive angeben :

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

oder

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

Benutzerdefinierte Standardwerte können während des Setups über das Optionsobjekt an das Paket übergeben werden .

N. Kudryavtsev
quelle

Mouseover oder Hover vue.js

Antworten:

Komponente

Wiederverwendbare Kompositionsfunktion