Vue3.0项目——打造企业级音乐App（二）图片懒加载、v-loading指令的开发和优化

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import lazyPlugin from 'vue3-lazy'
// 引入全局样式文件
import '@/assets/scss/index.scss'
createApp(App).use(store).use(router).use(lazyPlugin, {
    loading: require('@/assets/images/default.png')
}).mount('#app')

  <div class="icon">
      <img width="60" height="60" v-lazy="item.pic">
    </div>

<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>
  export default {
    name: 'loading',
    data() {
      return {
        title: '正在载入...'
      }
    },
    methods: {
      setTitle(title) {
        this.title = title
      }
    }
  }
</script>
<style lang="scss" scoped>...</script>

// 自定义指令 loading
import { createApp } from 'vue'
import Loading from './loading'
const loadingDirective = {
    mounted(el, binding) {
        const app = createApp(Loading)
        const instance = app.mount(document.createElement('div'))
        el.instance = instance
        if (binding.value) {
            append(el)
        }
    },
    // 更新的时候，loading 为 true，则还是执行 append(el)，为 false，执行 remove(el)
    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

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import lazyPlugin from 'vue3-lazy'
import loadingDirective from './components/base/loading/directive'
import '@/assets/scss/index.scss'
createApp(App).use(store).use(router).use(lazyPlugin, {
    loading: require('@/assets/images/default.png')
}).directive('loading', loadingDirective).mount('#app')

<div class="recommend" v-loading="loading">
...
  <h1 class="list-title" v-show="!loading">热门歌单推荐</h1>
</div>

// 自定义指令 loading
import { createApp } from 'vue'
import Loading from './loading'
import { addClass, removeClass } from '@/assets/js/dom'
// g-relative 是在 base.sass 中定义好的 position: relative
const relativeCls = 'g-relative'
const loadingDirective = {
    mounted(el, binding) {
        const app = createApp(Loading)
        const instance = app.mount(document.createElement('div'))
        el.instance = instance
        // 拿到动态参数
        const title = binding.arg
        if (typeof title !== 'undefined') {
            instance.setTitle(title)
        }
        if (binding.value) {
            append(el)
        }
    },
    // 更新的时候，loading 为 true，则还是执行 append(el)，为 false，执行 remove(el)
    updated (el, binding) {
        const title = binding.arg
        if (typeof title !== 'undefined') {
            el.instance.setTitle(title)
        }
        if (binding.value !== binding.oldValue) {
            binding.value ? append(el) : remove(el)
        }
    }
}
function append(el) {
    // 获取元素当前样式
    const style = getComputedStyle(el)
    // 如果样式不属于以下三种之一，则给 el 添加需要的定位
    if (['absolute', 'fixed', 'relative'].indexOf(style.position) === -1) {
        // 添加样式
        addClass(el, relativeCls)
    }
    el.appendChild(el.instance.$el)
}
function remove(el) {
    removeClass(el, relativeCls)
    el.removeChild(el.instance.$el)
}
export default loadingDirective

export function addClass(el, className) {
  if (!el.classList.contains(className)) {
    el.classList.add(className)
  }
}
export function removeClass(el, className) {
  el.classList.remove(className)
}

<div class="recommend" v-loading:[loadingText]="loading">
  ...
</div>
data() {
  return {
    loadingText: '正在载入...'
  }
}