vue自定义指令实现slide滑动效果

情景：
点击某个图标的时候弹出来个小弹窗，但是希望弹窗弹出时能有个缓慢展示，缓慢收起的那个效果而不是生硬的直接显示隐藏。 那么自定义一个指令，以后有弹窗的地方，用这个指令控制都可以达到这个效果。
1 创建一个文件，这算是封装的slide的组件

export default (Vue) => {
    Vue.directive ('slide', {
        inserted: function(el,binding){
            if(binding.value){
                $(el).slideDown();
            } else {
                $(el).hide();
            }
        },
        update: function(el,binding) {
            let newVal = binding.value,oldVal=binding.oldValue;
            if(newVal===oldVal){
                return;
            };
            if(binding.value){
                $(el).slideDown();
            }else{
                $(el).slideUp();
            }
        }
    })
}

2 在main.js 里面引入这个文件

import Directive from ' 刚才创建文件的路径'
Directive(Vue)

3 使用的时候通过v-slide即可