自定义v-loading指令

在使用vue框架中，自定义了一系列的指令，但样式能修改的局限性比较大，所以自己可以自定义一个！！
vue2与vue3除了文件格式外，基本是一样的，不做过多讲解，以vue3为例

没有华丽的文采，直接上代码哈

1. 创建vep-loading.js或vep-loading.ts文件（名字可自取）

   export const vepLoading = {
       beforeMount(el: any, binding: any) {
           const isLoading = binding.value;
           if (isLoading) {
               showLoading(el);
           }
       },
   
       mounted(el: any, binding: any) {
           const isLoading = binding.value;
           if (isLoading) {
               showLoading(el);
           }
       },
       updated(el: any, binding: any) {
           const isLoading = binding.value;
           if (isLoading !== binding.oldValue) {
               isLoading ? showLoading(el) : hideLoading(el);
           }
       },
       unmounted(el: any) {
           hideLoading(el);
       }
   }
   
   function showLoading(el: any) {
       el.classList.add('vep-loading');
   }
   
   function hideLoading(el: any) {
       el.classList.remove('vep-loading');
   }
   

   

2. 在main.js或main.ts文件中全局注册

   import {createApp} from 'vue'  // 引入vue属性
   import App from './App.vue'  // 引入App文件
   import {vepLoading} from "@/utils/vep-loading.ts"
   
   const app = createApp(App)
   app.directive('vep-loading', vepLoading)
   

3. 使用（任意div均可，这里以表格为例）

   <template>
     <div>
       <div v-vep-loading="loading" class="box"></div>
       <el-button type="primary" @click="openHandle" > 指令方式 </el-button>
     </div>
   </template>
   
   <script setup lang="ts">
   import {ref} from 'vue'
   const loading = ref(false);
   
   const openHandle= () => {
     loading.value = true;
     setTimeout(() => {
       loading.value = false;
     }, 2000);
   }
   </script>
   
   <style scoped>
   .box{
     width: 500px;
     height: 300px;
     border: 1px solid red;
   }
   </style>
   
   

   在el-table中(该文件见之前自定义vep-crud组件)

   

4. 样式

   // 自定义加载动画指令
   .vep-loading {
   	position: relative;
   	
       &::before {
         content: '';
         position: absolute;
         width: 100%;
         height: 100%;
         z-index: 9999999;
         background-position: center;
         background-color: rgba(0, 0, 0, 0.3);
         background-repeat: no-repeat;
         background-size: 64px 64px;
         background-image: url("http://175.178.164.195:9000/kylin-mall/icon/loading-02.gif");  // 可替换自己的图片
       }
   }
   

5. 展示效果：
   

   
   注：背景颜色可以在css中自定义，我用的是黑色透明的，element-ui用的是白色透明的，根据个人喜好来

   

代码持续更新，若有更好的方法，欢迎各位道友评论区留言探讨！