vue3 自定义全局指令

loading效果

src下新建 minixs文件夹，minixs下新建 directives.js

directives.js

function loading(app){
    app.directive('loading', {
        mounted(el, binding){
            let ele=document.querySelector("#wxj_loading")
            ele.style.display="block"
        },

        updated(el, binding){
            let ele=document.querySelector("#wxj_loading")
            let val = binding.value
            console.log("hello")        //一直在输出
            if(binding.oldValue!==binding.value){
               
                ele.style.display="none"
            }
            if(val==undefined){
                return alert("请传入参数");
            }
    
            let isShow=false
          
            if(Array.isArray(val)){
               if(val.length===0){
                 isShow=true
               }else{
                isShow=false 
               }
            }else{
                if(val){
                    isShow=false 
                }else{
                    isShow=true
                }
            }
    
            if (isShow) {
                ele.style.display="block"
            }else{
                ele.style.display="none"
            }
        },
        // unmounted(el) { // 如果在这个页面定义 wxj_loading 节点才需要用到这个 来清除节点
        //     let ele=document.querySelector("#wxj_loading")
        //     if (ele){
        //         console.log("removeChild")
        //         document.querySelector("#app").removeChild(ele)
        //     } 
        //   }
        
    })
}

export {
    loading 
}

components下新建common文件夹，common下新建Loading组件

这儿可以随便写 取一个id包裹即可,想要美美的loading，可以找点loading动图(gif)，这个id(wxj_loading)要和directives.js中的id一致

<template>
  <div class='loading' id="wxj_loading">
    loading...
  </div>
</template>

.loading{
      background-color: rgba(0,0,0,.2);
      color: white;
      width: 100vw;
      height: 100vh;
      line-height: 100vh;
      text-align: center;
      font-weight: 600;
      font-size: 20px;
      position: fixed;
      left: 0;
      top: 0;
      right: 0;
      display: none;
      z-index: 999;
  }

在app.vue中导入Loading组件

将Loading放到全局

在main.js中导入directives.js

import {loading} from './minixs/directives.js'
const app = createApp(App)
loading(app)

实际使用

传入页面的ajax返回数据即可(必须传入这个监听值)

 <van-swipe v-loading="list" class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in list" :key="item.id">
        {{item.img}}
      </van-swipe-item>
    </van-swipe>