【vue2第十三章】自定义指令 自定义v-loading指令

自定义指令

像 v-html，v-if，v-for都是vue内置指令，而我们也可以封装自定义指令，提升编码效率。

什么是自定义指令？
自己定义的一些指令，可以进行一些dom操作，扩展格外的功能。比如让图片懒加载，让input自动聚焦。
自定义指令又分为全局注册和局部注册。

使用方法则是与内置指令一样，直接在标签上写v-指令名即可。

全局注册指令：
在main.js中为vue对象添加：

//focus是指令名称
Vue.directive('focus',{
//inserted是指令的生命周期函数，指再页面中插入此元素时调用inserted(el){
//为元素聚焦el.focus()}
} 
)

使用直接在标签上面写v-指令名称即可：

    <input  type="text" v-focus :value="msg"  ref="inp">

局部注册与使用：

<template><div><!-- 添加v-指令名称 v-focus --><input  type="text" v-focus :value="msg"  ref="inp"></div>
</template><script>
export default {data(){return{}},props:{msg:String},mounted(){},//在directives中写指令directives:{//指令名称"focus":{//在指令被插入到页面中时调用inserted(el){//el代表内添加v-focus的元素，为它聚焦    el.focus()}}}
}
</script>

实现一个自定义指令

定义一个color指令为标签修改颜色，color指令需要一个颜色值，传入不同的值，标签文字显示不同颜色
通过binding.value可以取到当前指令的值，再通过value去修改标签。
代码：

<template><div><div v-color="color1">你好 vue</div>  <div v-color="color2">你好 vue</div>  </div>
</template><script>
export default {data(){return{color1:'red',color2:'blue'}},props:{msg:String},mounted(){},//在directives中写指令directives:{//指令名称"color":{//在指令被插入到页面中时调用inserted(el,binding){//el代表内添加v-color的元素，为它添加字体颜色  el.style.color=binding.value},//在属性值更新时调用update(el,binding){//为color更新颜色el.style.color=binding.value},}}
}
</script>

效果：

其中修改data的color1和color2就会修改字体颜色。
总结：

v-loading指令封装

分析:

1.本质loading 效果就是一个蒙层，盖在了盒子上
2.数据请求中，开启loading状态，添加蒙层
3.数据请求完毕，关闭loading状态，移除蒙层

具体步骤实现:
1.准备一个loading 类，通过伪元素定位，设置宽高，实现蒙层

.loading:before {content: "";position: absolute;left: 0;top: 0;width: 100%;height: 100%;background:#fff url('./assets/91jiazai.png') no-repeat center;
}

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

export default {name: "App",data() {return {//显示内容msg: "你好!vue",//判断是否加载成功isloading:true};},created(){//模拟发送请求，返回数据花费了3秒钟setTimeout(() => {console.log(this.msg);//接收数据成功，将数据改为false显示页面this.isloading = false;}, 3000);},//在directives中写指令directives:{//指令名称"loading":{inserted(el,binding){//如果值为true添加伪类 ，否则不添加binding.value?el.classList.add('loading'):el.classList.remove('loading')},update(el,binding){//如果值为true添加伪类 ，否则不添加binding.value?el.classList.add('loading'):el.classList.remove('loading')}}}
};

3.结合自定义指令的语法进行封装复用
为标签添加v-loading = “数据”

<template><div id="app"><div class="box" v-loading="isloading">{{ msg }}</div>
</div>
</template>

效果进入页面时：

模拟请求完成之后：