• 【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()
      }
    } 
    )
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

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

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

    局部注册与使用

    <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>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31

    实现一个自定义指令

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

    <template>
      <div>
        <div v-color="color1">你好 vuediv>  
        <div v-color="color2">你好 vuediv>  
    
      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>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39

    效果:
    在这里插入图片描述
    其中修改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;
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    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')
                }
            }
        }
    };
      
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34

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

    <template>
      <div id="app">
        <div class="box" v-loading="isloading">
          {{ msg }}
        div>
    div>
    template>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    效果进入页面时:
    在这里插入图片描述
    模拟请求完成之后:
    在这里插入图片描述

  • 相关阅读:
    面试素材-结构化
    移动边缘计算终端如何赋能高校学习空间智慧管理
    阿里巴巴按关键字搜索新品数据 API
    【食品化学与营养】第一章 绪论 笔记
    【工具类】阿里域名关联ip(python版)
    MobaXterm如何连接CentOS7的Linux虚拟机?Redis可视化客户端工具如何连接Linux版Redis?
    通过Pycharm安装包以及Matplotlib包安装遇到的各种问题
    详解 Sqllogictest
    简单实现spring的set依赖注入
    初始多线程
  • 原文地址:https://blog.csdn.net/weixin_72979483/article/details/132692395