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

原创于 2021-08-12 16:20:30 发布 · 976 阅读

CC 4.0 BY-SA版权

本文介绍如何创建一个Vue自定义指令，实现弹窗的平滑滑入滑出效果。通过在组件中引入该指令，可以轻松地为任何弹窗添加动画过渡，提升用户体验。详细步骤包括创建slide组件、在main.js中导入并注册指令，以及在模板中使用v-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即可