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

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

2

Il existe un JSFiddle qui fonctionne correctement: http://jsfiddle.net/1cekfnqw/176/

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

funkvn
la 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
la 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
la 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
la source

Survolez ou survolez vue.js

Réponses:

Composant

Fonction de composition réutilisable