Survolez ou survolez vue.js

105

Je voudrais afficher un div lors du survol d'un élément dans vue.js. Mais je n'arrive pas à le faire fonctionner.

Il semble qu'il n'y ait aucun événement pour le survol ou le survol de la souris dans vue.js. Est-ce vraiment vrai?

Serait-il possible de combiner les méthodes jquery hover et vue?

javascript  vue.js 
— Anders Andersen
source
2
La directive v-on fonctionne également pour l'événement "hover". Si vous ajoutez à votre question le code que vous avez écrit, nous pouvons probablement vous aider à le faire fonctionner. Et oui, Vue est simple et petit et destiné à être intégré à d'autres packages comme jQuery.
— David K.Hess

Réponses:

94

Voici un exemple concret de ce que je pense que vous demandez.

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
source
26
ne fonctionne pas avec la dernière version de vue. @CYB a essayé de modifier votre réponse v-on:mouseover="mouseOver"mais n'a pas mentionné dans quelle version de vue la syntaxe a changé
— Aprillion
2
@NICO a une meilleure solution que la mienne et fonctionne avec la version actuelle (1.0.26 au moment de cet article). Veuillez citer sa réponse. Je vous remercie.
— Jarrod
1
Je voudrais supprimer ceci puisque je viens de le dire, le post ci-dessous par @NICO est meilleur que le mien, et plus à jour. Veuillez donner à NICO la bonne réponse et je supprimerai la mienne. Je vous remercie!
— Jarrod
2
l'exemple est cassé?
— user3743266
3
Je pense qu'il vaut mieux utiliser la main courte @mouseover:mouseover
— Davod Aslanifakor
176

Je pense que la logique ci-dessus pour le survol est incorrecte. il s'inverse simplement lorsque la souris survole. J'ai utilisé le code ci-dessous. cela semble fonctionner parfaitement bien.

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

sur vue instance

data : {
    upHere : false
}

J'espère que cela pourra aider

— shakee93
source
15
Cela devrait être la réponse acceptée! La réponse acceptée et la réponse la plus positive entraînent un scintillement. Chaque mouvement du curseur sur le @ mouseover-div inverse l'état actuel ...
— Stefan Medack
Si vous affichez un div caché comme une bulle de dialogue, vous aurez un scintillement au survol de la souris. Ajoutez simplement le même code génial mouseover / mouseleave au div caché.
— mcmacerson
Fonctionne pour moi, avec webpack suffit de changer vos données comme:data: () => ({ upHere: false })
— Emile Cantero
77

Il n'y a pas besoin de méthode ici.

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
source
10
Vous pouvez utiliser l'un v-on:mouseoverou l' autre ou le raccourci @mouseoverselon la documentation vuejs.org/guide/syntax.html#v-on-Shorthand
— nu everest
1
Vous pouvez remplacer onpar v-on:ou @pour l'un des attributs d'événement html. w3schools.com/tags/ref_eventattributes.asp
— nu everest
Quel est le problème? Celui-ci fonctionne et doit être marqué comme la bonne réponse.
— NICO
Vue 2.2.0 n'aime pas ça - crachez un avertissement "[Vue warn]: Ne montez pas Vue sur <html> ou <body> - montez plutôt sur des éléments normaux."
— Dima Fomin
Par souci de simplicité, j'ai fait de <body> une instance de vue. Bien sûr, vous ne devriez pas faire cela dans votre application réelle.
— NICO
25

Pour afficher des éléments enfants ou frères, c'est possible avec CSS uniquement. Si vous utilisez :hoveravant combinateur ( +, ~, >, space). Ensuite, le style ne s'applique pas à l'élément survolé.

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
source
1
Le questionneur pose spécifiquement des questions sur vue.js. Puisqu'il permet à javascript d'être facilement lié à l'événement mouseover.
— nu everest
5
J'utilise Vue et c'est la meilleure solution pour moi. J'ai une liste imbriquée avec des boutons qui ne devraient apparaître qu'au survol, et utiliser des variables supplémentaires pour suivre l'état du survol est excessif. CSS est beaucoup plus élégant. Merci qsc!
— david_nash
13

Avec les événements mouseoveret mouseleave, vous pouvez définir une fonction bascule qui implémente cette logique et réagit sur la valeur dans le rendu.

Vérifiez cet exemple:

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>
Développer l'extrait

— fitorec
source
les postprocesseurs css, par exemple purgecss, ne pourront pas récupérer vos classes si vous les construisez dynamiquement comme ceci. mieux:@mouseover="btn-color='btn-warning' @mouseleave="btn-color='btn-primary' :class="btn btn-block { btn-color}"
— Erich le
7

Avec mouseoverseulement les séjours à l'élément visible lorsque les feuilles de souris l'élément plané, alors j'ai ajouté ceci:

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

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

Il est possible de basculer une classe en survolant strictement dans le modèle d'un composant, cependant, ce n'est pas une solution pratique pour des raisons évidentes. Pour le prototypage en revanche, je trouve utile de ne pas avoir à définir des propriétés de données ou des gestionnaires d'événements dans le script.

Voici un exemple de la façon dont vous pouvez expérimenter les couleurs des icônes à l'aide de 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>
Développer l'extrait

— DigitalDrifter
source
2

J'ai rencontré le même problème, et je le résolve!

        <img :src='book.images.small' v-on:mouseenter="hoverImg">
Développer l'extrait

— LittleStupid
source
1

Bien que je donne une mise à jour en utilisant la nouvelle api de composition.

Composant

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

Fonction de composition réutilisable

La création d'une useHoverfonction vous permettra de la réutiliser dans n'importe quel composant.

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
}

Voici un exemple rapide appelant la fonction à l'intérieur d'un composant 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>

Vous pouvez également utiliser une bibliothèque comme celle @vuehooks/corequi contient de nombreuses fonctions utiles, notamment useHover.

— jsbroks
source
0

Voici un exemple très simple pour MouseOver et 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
source
0

Veuillez jeter un œil au package vue-mouseover si vous n'êtes pas satisfait de l'apparence de ce code:

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

vue-mouseover fournit une v-mouseoverdirective qui met à jour automatiquement la propriété de contexte de données spécifiée lorsque le curseur entre ou quitte un élément HTML auquel la directive est attachée.

Par défaut, dans l'exemple suivant, la isMouseoverpropriété sera truelorsque le curseur se trouve sur un élément HTML et falsesinon:

<div v-mouseover="isMouseover" />

De plus, par défaut, isMouseoveril sera initialement attribué lorsqu'il v-mouseoverest attaché à l' divélément, de sorte qu'il ne restera pas non affecté avant le premier événement mouseenter/ mouseleave.

Vous pouvez spécifier des valeurs personnalisées via la v-mouseover-valuedirective:

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

ou

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

Les valeurs par défaut personnalisées peuvent être transmises au package via l' objet d'options lors de l'installation.

— N. Kudryavtsev
source
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.