常见v-loading加载指令 (12 vue音乐项目 )

首先一个问题

vue并不只是只创建一个App.vue

这是日常创建的实例APP.vue的main.js文件

接着进入正题

先来看自定义指令

第二个对象对象内的value值

我们在页面加载时,页面数据请求缓慢,所以为了解决没有数据页面空白的尴尬,我们可以为他用v-if判断数据有无,来添加loading动画

今天我们用另一种优雅的方法

就是自定义loading指令,通过v-load指令添加

import { createApp } from 'vue'
import Loading from './loading'

const loadingDirective = {
  // 这里的el是绑定到的元素,binding是参数
  mounted (el, binding) {
    // 引入vue,实例化创建一个api,loading为根组件
    const app = createApp(Loading)
    // 将组建挂载到html,这里挂载到创建的api,(但是这里挂载创建的dom元素,实际并没有挂载到实际的dom层上)
    const instance = app.mount(document.createElement('div'))
    // 将instance添加到el对象中,为了后续可以获取到instance
    el.instance = instance
    console.log(binding.value)
    if (binding.value) {
      append(el)
    }
  },
  // 组件相关数据的修改会导致组件update
  updated (el, binding) {
    if (binding.value !== binding.oldvalue) {
      binding.value ? append(el) : remove(el)
    }
  }
}

function append (el) {
  el.appendChild(el.instance.$el)
}

function remove (el) {
  el.removeChild(el.instance.$el)
}

export default loadingDirective

在main.js函数中进行定义全局指令

使用指令