Vue3开发一个v-loading的自定义指令

我就是我 2023-10-09 19:33 17阅读 0赞

要实现在div元素上添加v-loading指令，即可出现加载图，如下所示(仅展示基础结构 下面还会对其进行更改)：

<div class="recommend" v-loading="loading">...</div>
    computed: {
        loading() {
          // 当没有轮播和推荐列表的时候返回false
          return !this.sliders.length && !this.albums.length
        }
    }

![b32d50fee1171aae7babb2528f55fbbc.gif][]

### **loading组件** ###

在src/components/base/loading下新建loading.vue文件，如下：

<template>
      <div class="loading">
        <div class="loading-content">
          <img width="24" height="24" src="./loading.gif">
          <p class="desc">{
         {title}}</p>
        </div>
      </div>
    </template>
    
    <script type="text/ecmascript-6">
    // 使用的时候 在容器上添加 div v-loading="true"即可实现loading效果 无需import
    export default {
      name: 'loading',
      data() {
        return {
          title: ''
        }
      },
      methods: {
        setTitle(title) {
          this.title = title
        }
      }
    }
    </script>
    
    <style lang="scss" scoped>
      .loading {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate3d(-50%, -50%, 0);
        .loading-content {
          text-align: center;
          .desc {
            line-height: 20px;
            font-size: $font-size-small;
            color: $color-text-l;
          }
        }
      }
    </style>

### **自定义指令执行逻辑** ###

在src/components/base/loading下新建directive.js：

// 自定义v-loading指令
    import { createApp } from 'vue'
    import Loading from './loading'
    import { addClass, removeClass } from '@/assets/js/dom'
    
    // 该样式添加在了assets/scss/base.scss中，.g-relative{position: relative}
    const relativeCls = 'g-relative'
    
    const loadingDirective = {
      // 主要写一些钩子函数 在钩子中去实现逻辑
      /*
      指令主要是将loading组件生成的DOM动态插入到指令作用的DOM对象上（v-loading=true），
      如果v-loading=false那么就删除动态插入的
       */
      // 指令挂载时的钩子函数
      mounted(el, binding) {
        /* 
        el指向指令所在的dom 如 <div v-loading="true" id="box"> 那么el就是#box 
        binding.value就是代表的true
        */
        // 判断v-loading值为true动态插入到指令作用的节点下
        /* 
        如果创建组件对应的dom？先用这个loading组件新建一个vue实例（app对象），
        然后再动态取挂载，就会产生一个实例，在实例中拿到它的DOM对象
        */
        const app = createApp(Loading)
        // 拿到它的实例,挂载到动态创建的DOM上，vue开发是支持多实例的，可以创建多个实例
        /* 
        因为创建的元素没挂载到BODY上，实际也没有完成dom层的挂载，
        目的是创建出来的实例的DOM对象要挂载到el上（指令所在的DOM）
        */
        const instance = app.mount(document.createElement('div'))
        /* 
        因为instance在mounted中只创建一次，但是之后会经常用到，要保留起来
        如果要在其他的钩子函数也要访问它的话就存在参数的el对象上
        这样操作在其他钩子中也可以获取到这个实例
        */
        el.instance = instance
        // 通过binding.arg拿到动态参数,如果组件中有多个参数可以考虑传进来的是一个数组
        const title = binding.arg
        // 如果参数不是空 执行实例中的方法
        if (typeof title !== 'undefined') {
          instance.setTitle(title)
        }
        // binding.value就是代表指令传递的值
        if (binding.value) {
          append(el)
        }
      },
      // 当组件更新的时候执行，因为指令不是一成不变的
      // 比如由v-loading=true变为v-loading=false 就会执行
      updated(el, binding) {
        // 通过binding.arg拿到动态参数
        const title = binding.arg
        // 如果参数不是空 执行实例中的方法
        if (typeof title !== 'undefined') {
          el.instance.setTitle(title)
        }
        // 如果loading前后值不一致
        if (binding.value !== binding.oldValue) {
            // 如果是true那么就插入否则删除
            binding.value ? append(el) : remove(el)
        }
      }
    }
    
    // 元素挂载的操作
    function append(el) {
      // 根据loading组件样式，是使用absolute，而当el不是fixed或retaive时候给其动态添加定位属性
      const style = getComputedStyle(el)
      // 判断el的样式中有无定位，===-1就是没有 希望v-loading不受样式限制
      if (['absolute', 'fixed', 'relative'].indexOf(style.position) === -1) {
        addClass(el, relativeCls)
      }
    
      // 因为loading组件生成的实例instance已经赋值给el.instance属性上了，所以在这里可以直接通过el拿到
      // el.instance.$el就是loading组件的DOM对象
      el.appendChild(el.instance.$el)
    }
    
    function remove (el) {
      removeClass(el, relativeCls)
      el.removeChild(el.instance.$el)
    }
    
    // 如果要在全局中使用，就在main.js中引入并注册
    export default loadingDirective

针对以上代码，有几点需要特别说明：

## 流程逻辑 ##

v-loading指令主要是将loading组件生成的DOM动态插入到指令作用的DOM对象上（v-loading=true），如果v-loading=false那么就删除动态插入的。

指令使用时开始，主要包含两个钩子函数：mounted和updated，mounted是在注册的时候运行，且只会运行一次；updated会在v-loading=“xx”值改变的时候执行。

mounted(el, binding) {...}

el指向指令所在的dom，如 <div v-loading="true" id="box"> 那么el就是\#box。而binging我们也来打印看一下：

![797625e5d67ae0420b00278369c107ac.jpeg][]

其中我们在代码中用到的有3处：

*  **arg：**通过binding.arg拿到动态参数,如果组件中有多个参数可以考虑传进来的是一个数组，动态参数就是在使用时：

<div class="recommend" v-loading:[loadingText]="loading">
    data() {
        return {
          sliders: [],
          albums: [],
          loadingText: '正在载入...'
        }
      },
    computed: {
        loading() {
          // 当没有轮播和推荐列表的时候返回false
          return !this.sliders.length && !this.albums.length
        }
    }

注意，v-loading:\[loadingText\]是固定写法，不是数组！！，主要用来向组件中传递参数，如果是多个参数，那么就传递一个数组或者对象。

*  **value：**就是v-loading="loading" 中的loading的值
 *  **oldValue**：v-loading之前的值，如果不存在就是undefined

#### 保存组件实例的小技巧 ####

使用loading组件再创建一个vue实例，然后将实例保存到mounted(el)的el中（这个实例只会在mounted中创建一次），这样就可以在其他的钩子函数中也可以获取到这个实例了。

const app = createApp(Loading)
    const instance = app.mount(document.createElement('div'))
    el.instance = instance

#### 应该考虑更广泛的应用场景 ####

通过看样式代码我们发现，loading组件依赖于父元素有定位，那么如果父元素没有定位的情况下，是不是应该给父元素动态的添加一个相对定位的样式？所以在append的函数中：

const style = getComputedStyle(el)
     // 判断el的样式中有无定位，===-1就是没有 
    // 没有就添加一个样式 addClass实现请见下方
    if (['absolute', 'fixed', 'relative'].indexOf(style.position) === -1) {
        addClass(el, relativeCls)
    }

#### 执行组件实例中的方法 ####

因为loading组件中暴漏了一个setTitle的方法，而el.instance中保存了这个组件的实例，于是乎:

el.instance.setTitle(title) // 执行组件中的方法

### **addClass和removeClass的实现** ###

在assets/js/dom.js中，写2个公用的方法，用于添加删除class：

export function addClass (el, className) {
      // 如果当前元素样式列表中没有className
      if (!el.classList.contains(className)) {
        el.classList.add(className)
      }
    }
    
    export function removeClass (el, className) {
      el.classList.remove(className)
    }

### **v-loading的注册与应用** ###

#### 全局注册 ####

在main.js中：

import loadingDirective from '@/components/base/loading/directive'
    createApp(App).directive('loading', loadingDirective).mount('#app')

注册的时候使用**directive（‘指令名称’， 指令对象）**

因为叫**v-loading所以这里传入loading**, directive('loading', loadingDirective)全局注册后在这个app（对象）下就可以全局使用v-loading指令了

#### 在组件中应用 ####

<div class="recommend" v-loading:[loadingText]="loading">...</div>
    
    data() {
        return {
          sliders: [],
          albums: [],
          loadingText: '正在载入...'
        }
    },
    
    computed: {
        loading() {
          // 当没有轮播和推荐列表的时候返回true
          // 当数据都有了之后返回false 删除加载层
          return !this.sliders.length && !this.albums.length
        }
    }

v-loading:\[loadingText\] 再强调一遍，**这里的\[\]不是数组**！仅仅是vue3的一种语法。用于向binging.arg中传递动态参数！见（四）。如果像组件中传递多个值的话：

loadingText: [ ... ] 或者 loadingText:  { a: .., b: ..}

然后在loading中根据需要进行赋值即可。

[b32d50fee1171aae7babb2528f55fbbc.gif]: https://img-blog.csdnimg.cn/img_convert/b32d50fee1171aae7babb2528f55fbbc.gif
[797625e5d67ae0420b00278369c107ac.jpeg]: https://img-blog.csdnimg.cn/img_convert/797625e5d67ae0420b00278369c107ac.jpeg