vue类似jquery slide的效果的一个指令

125 阅读1分钟

定义指令:

 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;
  }

效果

可以实现手风琴或者导航菜单