【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>

效果进入页面时：

模拟请求完成之后：