Passe o mouse ou passe o mouse sobre vue.js

104

Eu gostaria de mostrar um div ao passar o mouse sobre um elemento em vue.js. Mas não consigo fazer funcionar.

Parece que não há evento para passar o mouse ou passar o mouse no vue.js. Isso é verdade mesmo?

Seria possível combinar os métodos jquery hover e vue?

javascript vue.js

— Anders Andersen
fonte

2

A diretiva v-on também funciona para eventos "hover". Se você adicionar à sua pergunta o código que escreveu, provavelmente podemos ajudá-lo a fazê-lo funcionar. E sim, o Vue é simples e pequeno e se destina a ser integrado com outros pacotes como o jQuery.

— David K. Hess de

93

Aqui está um exemplo prático do que acho que você está pedindo.

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

não funciona com a versão mais recente do vue. @CYB tentou editar sua resposta, v-on:mouseover="mouseOver"mas não mencionou em qual versão do vue a sintaxe mudou

— abril

2

O @NICO tem uma solução melhor que a minha e funciona com a versão atual (1.0.26 no momento deste post). Por favor, referencie sua resposta. Obrigado.

— Jarrod

1

Gostaria de deletar isso, já que acabei de comentar, o post abaixo do @NICO é melhor que o meu e mais atualizado. Dê ao NICO a resposta correta e irei deletar a minha. Obrigado!

— Jarrod

2

o exemplo está quebrado?

— user3743266

3

Acho melhor usar short hand @mouseover:mouseover

— Davod Aslanifakor

176

Eu sinto que a lógica acima para pairar está incorreta. ele apenas inverte quando o mouse passa. eu usei o código abaixo. parece funcionar perfeitamente bem.

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

em vue instância

data : {
    upHere : false
}

espero que ajude

— shakee93
fonte

15

Esta deve ser a resposta aceita! A resposta aceita e a mais votada resultam em um componente oscilante. Cada movimento do cursor no @ mouseover-div inverte o estado atual ...

— Stefan Medack

Se você estiver exibindo um div oculto como um balão de fala, ficará piscando ao passar o mouse. Basta adicionar o mesmo código incrível de mouseover / mouse para a div oculta também.

— Mcmacerson

Funciona para mim, com webpack só tem que mudar seus dados como:data: () => ({ upHere: false })

— Emile Cantero

77

Não há necessidade de um método aqui.

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

Você pode usar o v-on:mouseoverou o atalho de @mouseoveracordo com os documentos vuejs.org/guide/syntax.html#v-on-Shorthand

— nu everest

1

Você pode substituir onpor v-on:ou @para qualquer um dos atributos de evento html. w3schools.com/tags/ref_eventattributes.asp

— nu everest

Qual é o problema? Esta está funcionando e deve ser marcada como a resposta correta.

— NICO

Vue 2.2.0 não gosta disso - cuspa um aviso "[Vue warn]: Não monte o Vue em <html> ou <body> - monte em elementos normais em vez disso."

— Dima Fomin

Por uma questão de simplicidade, fiz de <body> uma instância vue. Claro que você não deve fazer isso em seu aplicativo do mundo real.

— NICO

25

Para mostrar elementos filhos ou irmãos, é possível apenas com CSS. Se você usar :hoverantes de combinadores ( +, ~, >,space ). Em seguida, o estilo não se aplica ao elemento pairado.

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

O questionador está perguntando especificamente sobre vue.js. Uma vez que permite que o javascript seja facilmente vinculado ao evento mouseover.

— nu everest

5

Estou usando o Vue e esta é a melhor solução para mim. Eu tenho uma lista aninhada com botões que só devem aparecer durante o foco e usar variáveis extras para rastrear o estado do foco é exagero. CSS é muito mais elegante. Obrigado qsc!

— david_nash

13

Com os eventos mouseovere mouseleavevocê pode definir uma função de alternância que implementa essa lógica e reage ao valor na renderização.

Veja este exemplo:

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 trecho

— fitorec
fonte

Os pós-processadores css, por exemplo, purgecss, não serão capazes de selecionar suas classes se você construí-las dinamicamente assim. melhor:@mouseover="btn-color='btn-warning' @mouseleave="btn-color='btn-primary' :class="btn btn-block { btn-color}"

— Erich

7

Com mouseoverapenas o elemento permanece visível quando o mouse sai do elemento pairado, eu adicionei isto:

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

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

— besthost
fonte

6

É possível alternar uma classe ao passar o mouse estritamente no modelo de um componente, no entanto, não é uma solução prática por motivos óbvios. Por outro lado, para prototipagem, acho útil não ter que definir propriedades de dados ou manipuladores de eventos dentro do script.

Aqui está um exemplo de como você pode experimentar cores de ícones usando o 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 trecho

— DigitalDrifter
fonte

2

Tive o mesmo problema e resolvi!

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

Expandir trecho

— LittleStupid
fonte

2

Há um JSFiddle funcionando corretamente: http://jsfiddle.net/1cekfnqw/176/

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

— funkvn
fonte

1

Embora eu dê uma atualização usando a nova API de composição.

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>

Função de composição reutilizável

A criação de uma useHoverfunção permitirá a reutilização em quaisquer componentes.

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
}

Aqui está um exemplo rápido chamando a função dentro de um 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>

Você também pode usar uma biblioteca como a @vuehooks/coreque vem com muitas funções úteis, incluindo useHover.

— jsbroks
fonte

0

Aqui está um exemplo muito simples para 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

Por favor, dê uma olhada no pacote vue-mouseover se você não estiver satisfeito com a aparência deste código:

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

vue-mouseover fornece umav-mouseover diretiva que atualiza automaticamente a propriedade de contexto de dados especificada quando o cursor entra ou sai de um elemento HTML ao qual a diretiva está anexada.

Por padrão, no próximo exemplo de isMouseoverpropriedade será truequando o cursor estiver sobre um elemento HTML e falsecaso contrário:

<div v-mouseover="isMouseover" />

Além disso, por padrão isMouseover, será inicialmente atribuído quando v-mouseoverfor anexado ao divelemento, portanto, não permanecerá sem atribuição antes do primeiro mouseenter/mouseleave evento.

Você pode especificar valores personalizados por meio da v-mouseover-valuediretiva:

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

ou

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

Os valores padrão personalizados podem ser transmitidos ao pacote por meio do objeto de opções durante a configuração.

— N. Kudryavtsev
fonte