@mouseenter usado vue y el método de resolución de problemas evento parpadeo @mouseleave en un bucle

@mouseenter usado vue y el método de resolución de problemas evento parpadeo @mouseleave en un bucle

Recientemente conseguido en el proyecto cuando el ratón se trasladó ocultar encontró con un pequeño problema cuando la imagen actual necesita otros cuadros de la exhibición en circulación fuera de la foto. Es decir, cuando @mouseenter y eventos @mouseleave para lograr esta demanda, nos dimos cuenta de que el ratón se movió en el parpadeo de la imagen.


escribe Evento para el trabajo en el elemento padre: la clave! ! ! 0.0

Escribí los siguientes métodos de implementación y lograr resultados

Código del estilo:

<div class="imgs" v-for="(item,index) in exampleUrl" :key = index  @mouseenter ="enterFun(index)" @mouseleave ="leaveFun(index)" >                     
        <img :src = item.url  v-show="show ||  n != index" >                               
        <div   v-show="!show  && n == index" >查看详情</div>
</div>

Otros códigos:

export default {
	data () {
	    return {
	        n: 0,
	        show:true,
	    }
	} ,
	methods: {
		enterFun(index){
		    console.log('鼠标移入');
		    this.show = false;
		    this.n = index;
		},
		leaveFun(index){
		    console.log('鼠标离开');
		    this.show = true;
		    this.n = index;
		},
	}       
}

Y, finalmente, el efecto aparece cuando el ratón se mueve en la imagen para la imagen actual muestra una vista en detalles:
Aquí Insertar imagen Descripción

Publicado cuatro artículos originales · ganado elogios 9 · vistas 7474

Supongo que te gusta

Origin blog.csdn.net/yw1376394716/article/details/105242089
Recomendado
Clasificación