定义指令:
directives: {
slide: {
inserted:function(el,binding){
if(binding.value){
let height = el.scrollHeight;
el.style.cssText = `height:${height}px;`;
}
},
update: function (el,binding) {
let newVal = binding.value,oldVal=binding.oldValue;
if(newVal===oldVal){
return;
};
if(binding.value){
let height = el.scrollHeight;
el.style.cssText = `height:${height}px;`;
}else{
el.style.cssText=`height:0;`;
}
},
}
},
示例
使用传入true,下滑,false上滑
<ul v-slide="value">
</ul>
说明:说明,这个要配合样式
因为transition在使用时,需要确定两端的值才可以过渡,所以定义一个指令来确定这两个极端的值
这个好处就是不需要在乎ul的高度是多少了,
ul{
height: 0;
overflow: hidden;
transition: height 0.3s ease-in-out;
}
效果
可以实现手风琴或者导航菜单