Comment transformer jQuery en méthodes: fonction VueJS

Question

Je dois savoir comment faire ce travail de fonction VueJS comme méthode ...

$(document).ready(function(){ 

    $(".slide").hover(function(){ 
     $(this).find("div.snipit").slideDown("slow"); 
    },function(){ 
     $(this).find("div.snipit").slideUp("slow");  
    }); 
});     

http://jsfiddle.net/NuWna/2/

Answer 1

Utilisez le api DOM et ajoutez la écouteurs dans la méthode mounted.

Basé sur le @RecardoPoole jsFiddle fourni (link), I a apporté les modifications suivantes:

• utilisation visibility au lieu de display
• transition se fait en utilisant height 3s, visibility 3s
• pour la divdiv avec l'intérieur de la classe slide, soit le div avec la classe snipit, j'ai ajouté le CSS overflow: hidden, ceci est de s'assurer que l'extérieur div s couvriront les textes lorsqu'ils sont glissés vers le bas (link)

const app = new Vue({ 
 
    el: '#app', 
 
    mounted() {  
 
     const originHeight = '125px'; 
 
     const slideEl = document.getElementsByClassName('slide')[0]; 
 
     const snipitEl = document.querySelector('div.snipit'); 
 
     
 
     snipitEl.style.transition = 'height 3s, visibility 3s'; 
 
     
 
     slideEl.addEventListener('mouseover', function() { 
 
      // mouse is hovering over this element 
 
      // slidedown 
 
      snipitEl.style.height = originHeight; 
 
      snipitEl.style.visibility = 'visible'; 
 
     }); 
 

 
     slideEl.addEventListener('mouseout', function() { 
 
      // mouse was hovering over this element, but no longer is 
 
      // slideup 
 
      snipitEl.style.height = '0px'; 
 
      snipitEl.style.visibility = 'hidden'; 
 
     }); 
 
    } 
 
});

img{ 
 
    border:1px solid yellow; 
 
    margin: 14px 0 0 0; 
 
} 
 

 
div.slide { 
 
    width: 310px; 
 
    height: 230px; 
 
    float: left; 
 
    border:1px solid red; 
 
    text-align: center; 
 
    position: relative; 
 
    background: url(http://dummyimage.com/310x230) no-repeat top center; 
 

 
} 
 

 
div.slide div { 
 
    overflow: hidden; 
 
    width: 250px; 
 
    height: 100px; 
 
    padding: 0; 
 
    visibility: hidden; 
 
    position: absolute; 
 
    bottom: 0px; 
 
    background-color: rgba(0, 0, 0, 0.5); 
 
    border:1px solid red; 
 
    bottom: 14px; 
 
    left:30px; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.js"></script> 
 
<div id="app"> 
 
    <div class="slide"> 
 
    <img src="http://dummyimage.com/250x200" alt="1" width="250" height="200" /> 
 

 
    <div class="snipit"> 
 
     <h4>Image 1</h4> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p> 
 
    </div> 
 

 
</div> 
 
</div>