系列文章目录

内容 参考链接 Vue3.0 项目启动 Vue3.0 项目启动（打造企业级音乐App） Vue3.0项目——打造企业级音乐App（一） Tab栏  
    
    
、轮播图

     


     


     、歌单列表 




 




 



、滚动组件 Vue3.0项目——打造企业级音乐App（二） 图片懒加载  

   

   

、v-loading指令的开发和优化

项目演示

图片懒加载

main.js 文件

安装 vue3-lazy  
    
    
，在 main.js 文件中导入并使用 传入两个参数

     


     


     ，一个是 lazyPlugin 




 




 



，一个是要加载的图片的相对地址 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)

recommend.vue 组件

修改 :src 为 v-lazy  

   

   

，实现图片的懒加载 <div class="icon"> <img width="60" height="60" v-lazy="item.pic"> </div>

效果图如下：

v-loading 自定义指令开发

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

./components/base/loading/directive.js 文件

该文件自定义 loading 指令 挂载和更新的时候做出相应变化 仅适用于 absolute | fixed | relative 的定位（后面还会优化） // 自定义指令 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

main.js 文件

导入并全局使用 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)

./views/recommend.vue 组件

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

v-loading 自定义指令开发的优化

./components/base/loading/directive.js 文件

当没有设置 position 为 absolute | fixed | relative 其中一个时
   




   




   

，自动添加 position: relative // 自定义指令 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

./src/js/dom.js 文件

如果没有 absolute | fixed | relative

     



     



     ，则添加样式 binding.value 为 false 时














，移出样式 export function addClass(el, className) { if (!el.classList.contains(className)) { el.classList.add(className) } } export function removeClass(el, className) { el.classList.remove(className) }

recommend.vue 组件

动态获取参数 <div class="recommend" v-loading:[loadingText]="loading"> ... </div> data() { return { loadingText: 正在载入... } }

至此  
    
    
，推荐页面的基本开发先告一段落

     


     


     ，接下来将进行歌手页面的开发

不积跬步无以至千里 不积小流无以成江海

点个关注不迷路 




 




 



，持续更新中…