Vue-2.7自定义指令

自定义指令

自己定义的指令，可以封装一些dom操作，扩展额外功能

例如需求：当页面加载时，让元素将获得焦点（autofucus在safari浏览器有兼容性）

操作dom：dom元素.focus()    太麻烦！！

mounted(){
    this.$refs.inp.focus()
}

全局注册-语法（在main.js文件中注册 ）

Vue.directive('指令名',{
    "inserted"(el){
        //可以对el标签，扩展额外功能
        el.focus()
    }
})

局部注册-语法（在当前文件下注册，也只能在当前页面下使用）

directive:{
    "指令名":{
        inserted(){
            //可以对el标签，扩展额外功能
            el.focus()
        }
    }
}

使用：

<input v-指令名 type="text">

指令的值

需求：实现一个color指令-传入不同的颜色，给标签设置文字颜色

语法：v-指令名="指令值"，在绑定指令时，可以通过“等号”的形式为指令绑定具体的参数值

<div v-color="color">我的内容</div>

通过binding.value可以拿到指令值

通过update钩子，可以监听指令值的变化，进行dom更新操作

directives:{
    color:{
        //1.inserted提供的是元素被添加到页面中时的逻辑
        inserted(el,binding){
            el.style.color=binding.value
        },
        //2.update指令的值被修改的时候触发，提供值变化后，dom更新的逻辑
        update(el,binding){
            el.style.color=binding.value
        }
    }
}

v-loading指令封装

场景：实际开发过程中，发送请求需要时间，在请求的数据未回来时，页面会处于空白状态->用户体验不好

需求：封装一个v-loading指令，实现加载中的效果

分析：

1.本质loading效果就是一个蒙层，盖在了盒子上

2.数据请求中，开启loading状态，添加蒙层

3.数据请求完毕，关闭loading状态，移除蒙层

实现：

1.准备一个loading类，通过伪元素（:before,:after）定位，设置宽高，实现蒙层

<style>
.loading:before{
    content:'';
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%; 
    background:#fff url('./loading.gif') no-repeat center;
}
</style>

2.开启关闭loading状态（添加移除蒙层），本质只需要添加移除类即可

在盒子的class上添加或移除loading类

3.结合自定义指令的语法进行v-loading封装复用

<div v-loading="isLoading"></div>

data(){
    return{
        isLoading:true
    }
},
directives:{
    loading:{
        inserted(el,binding){
            binding.value?el.classList.add('loading'):el.classList.remove('loading')
        },
        update(el,binding){
            binding.value?el.classList.add('loading'):el.classList.remove('loading')
        }
    }
}