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

小鱼儿 2023-10-15 16:53 8阅读 0赞

### 自定义指令 ###

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

**什么是自定义指令？**  
自己定义的一些指令，可以进行一些dom操作，扩展格外的功能。比如让图片懒加载，让input自动聚焦。  
自定义指令又分为全局注册和局部注册。  
![在这里插入图片描述][3407e0a56d5b42788cd257b043ba573e.png_pic_center]  
使用方法则是与内置指令一样，直接在标签上写`v-指令名`即可。  
![在这里插入图片描述][ab2c452f0d0f487999b7f3f13ad40cab.png_pic_center]  
**全局注册指令**：  
在main.js中为vue对象添加：

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

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

**局部注册与使用**：

<template>
      <div>
        
        <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>

效果：  
![在这里插入图片描述][590b894203e845449d18c792e706679e.png_pic_center]  
其中修改data的color1和color2就会修改字体颜色。  
总结：  
![在这里插入图片描述][35cc0082940a4bf5b4a7a65684d1e9ae.png_pic_center]

### v-loading指令封装 ###

![在这里插入图片描述][f2c4f386ef904910ac88a74be178076a.png_pic_center]  
分析:

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 = “数据”

效果进入页面时：  
![在这里插入图片描述][9eaa9caf10744e1c8ba49d406b9da522.png_pic_center]  
模拟请求完成之后：  
![在这里插入图片描述][c9c3cb203c2740df94d048b3358b67a7.png_pic_center]

[3407e0a56d5b42788cd257b043ba573e.png_pic_center]: https://img-blog.csdnimg.cn/3407e0a56d5b42788cd257b043ba573e.png#pic_center
[ab2c452f0d0f487999b7f3f13ad40cab.png_pic_center]: https://img-blog.csdnimg.cn/ab2c452f0d0f487999b7f3f13ad40cab.png#pic_center
[590b894203e845449d18c792e706679e.png_pic_center]: https://img-blog.csdnimg.cn/590b894203e845449d18c792e706679e.png#pic_center
[35cc0082940a4bf5b4a7a65684d1e9ae.png_pic_center]: https://img-blog.csdnimg.cn/35cc0082940a4bf5b4a7a65684d1e9ae.png#pic_center
[f2c4f386ef904910ac88a74be178076a.png_pic_center]: https://img-blog.csdnimg.cn/f2c4f386ef904910ac88a74be178076a.png#pic_center
[9eaa9caf10744e1c8ba49d406b9da522.png_pic_center]: https://img-blog.csdnimg.cn/9eaa9caf10744e1c8ba49d406b9da522.png#pic_center
[c9c3cb203c2740df94d048b3358b67a7.png_pic_center]: https://img-blog.csdnimg.cn/c9c3cb203c2740df94d048b3358b67a7.png#pic_center