是否有模仿 http://jsfiddle.net/NuWna/2/ 的 VueJS 组件答案

【问题标题】：Is there a VueJS component that mimic's http://jsfiddle.net/NuWna/2/是否有模仿 http://jsfiddle.net/NuWna/2/ 的 VueJS 组件
【发布时间】：2018-03-11 00:52:54
【问题描述】：

我正在寻找一个模仿这个例子的 VueJS 卡片组件： http://jsfiddle.net/NuWna/2/

很难用 VueJS 编写 jQuery 代码

$(document).ready(function(){

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


});

【问题讨论】：

确保在vue中做同样的事情并不复杂
那么请使用网络搜索引擎查看，这不是 SO 的目的。请阅读：stackoverflow.com/help/asking
Maciej ...我一直在寻找并继续寻找。我不需要阅读任何东西......只需要帮助......这就是SO的目的！如果你不打算帮助不要评论！
为什么同一个问题要问两次？ stackoverflow.com/questions/46483366/…
完全同意@RecardoPoole - 这里有太多人提出批评但没有帮助，这是浪费打字！

标签： vue.js vue-component

【解决方案1】：

你可以创建一个Vue组件，你可以在mountedvue生命周期钩子上使用jQuery的slideUp/slideDown方法，

我也给出了下面没有 jQuery 的解决方案。

1.使用 Vue + jQuery - http://jsfiddle.net/79rc5oss/1/

Vue.component('my-comp', {
	template: `
  	<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>
  `,
  mounted: function(){
  	$(".slide").hover(function(){
        $(this).find("div.snipit").slideDown("slow");
    },function(){
        $(this).find("div.snipit").slideUp("slow");    
    });
  }
  
})

var app = new Vue({
	el: '#app'
});

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 {
    width: 250px;
    height: 100px;
    padding: 0;
    display: none; 
    position: absolute;
    bottom: 0px;
    background-color: rgba(0, 0, 0, 0.5);
    border:1px solid red;
    bottom: 14px;
    left:30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.js"></script>
<div id="app">
  <my-comp></my-comp>

</div>

2。在没有 jQuery 的情况下使用 Vue + CSS - http://jsfiddle.net/79rc5oss/

Vue.component('my-comp', {
	template: `
  	<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>
  `
  
})

var app = new Vue({
	el: '#app'
});

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;
    overflow: hidden;

}

.slide div.snipit{
    width: 250px;
    height: 0px;
    padding: 0;
    display: block; 
    position: absolute;
    bottom: 0px;
    background-color: rgba(0, 0, 0, 0.5);
    border:1px solid red;
    bottom: 12px;
    left:30px;
    overflow: hidden;
  transition: all .5s ease-out;
    
}


.slide:hover div.snipit{
  height: 100px;
  
	

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.js"></script>
<div id="app">
  <my-comp></my-comp>

</div>

【讨论】：