javascript - Pase el mouse o desplace el mouse vue.js
(9)
Aquí hay un ejemplo práctico de lo que creo que está pidiendo.
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;
}
}
});
Me gustaría mostrar un div al pasar el mouse sobre un elemento en vue.js. Pero parece que no puedo hacer que funcione.
Parece que no hay evento para pasar el mouse o pasar el mouse en vue.js. ¿Es esto realmente cierto?
¿Sería posible combinar los métodos jquery hover y vue?
Con el
mouseover
solo el elemento permanece visible cuando el mouse sale del elemento suspendido, así que agregué esto:
@mouseover="active = !active" @mouseout="active = !active"
<script>
export default {
data(){
return {
active: false
}
}
</script>
Con los eventos
mouseover
y
mouseleave
, puede definir una función de alternancia que implemente esta lógica y reaccione al valor en el renderizado.
Mira este ejemplo:
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>
Es posible alternar una clase al pasar el mouse estrictamente dentro de la plantilla de un componente, sin embargo, no es una solución práctica por razones obvias. Por otro lado, para la creación de prototipos, encuentro útil no tener que definir propiedades de datos o controladores de eventos dentro del script.
Aquí hay un ejemplo de cómo puedes experimentar con los colores de los íconos 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>
Hay un JSFiddle que funciona correctamente: http://jsfiddle.net/1cekfnqw/176/
<p v-on:mouseover="mouseOver" v-bind:class="{on: active, ''off'': !active}">Hover over me!</p>
No hay necesidad de un método aquí.
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
}
})
Para mostrar elementos secundarios o hermanos es posible solo con CSS.
Si usa
:hover
antes de los combinadores (
+
,
~
,
>
,
space
).
Entonces el estilo no se aplica al elemento suspendido.
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; }
Se me ocurrió el mismo problema, ¡y lo solucioné!
<img :src=''book.images.small'' v-on:mouseenter="hoverImg">
Siento que las lógicas anteriores para el desplazamiento son incorrectas. solo es inverso cuando el mouse se desplaza. He usado el siguiente código. parece funcionar perfectamente bien.
<div @mouseover="upHere = true" @mouseleave="upHere = false" >
<h2> Something Something </h2>
<some-component v-show="upHere"></some-component>
</div>
en vue instancia
data : {
upHere : false
}
Espero que ayude