vue3 使用封装loading

最新推荐文章于 2024-06-02 09:45:36 发布

皮卡丘-杰尼龟

最新推荐文章于 2024-06-02 09:45:36 发布

阅读量510

点赞数

文章标签：前端 css3 css

本文链接：https://blog.csdn.net/weixin_46328739/article/details/134441757

版权

vue2请看这篇文章 vue2封装loading

自己写一个loading页面，用作单个div的loading

在components中创建一个名为loading.vue的组件

<template>
  <transition name="fade">
    <section>
      <div class="loading">
        <img class="icon-animation" src="@/assets/loading.png" />
        <p class="desc">数据加载中...</p>
      </div>
    </section>
  </transition>
</template>
<script>
  export default {
    
    computed: {
    },
    data () {
      return {
       
      }
    },
    methods: {
      
    },
    destroyed() {
    },
    mounted() {

      
    }
  }
</script>
<style scoped lang="scss">
  @-ms-keyframes iconRotate {
    0% {
      -ms-transform: rotate(0deg);
    }

    25% {
      -ms-transform: rotate(90deg);
    }

    50% {
      -ms-transform: rotate(180deg);
    }

    75% {
      -ms-transform: rotate(270deg);
    }

    100% {
      -ms-transform: rotate(360deg);
    }
  }
  @keyframes iconRotate {
    0% {
      -webkit-transform: rotate(0deg);
    }

    25% {
      -webkit-transform: rotate(90deg);
    }

    50% {
      -webkit-transform: rotate(180deg);
    }

    75% {
      -webkit-transform: rotate(270deg);
    }

    100% {
      -webkit-transform: rotate(360deg);
    }
  }
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.5s;
  }
  .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
  }
  section {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background: transparent;
    z-index: 99;
    .loading {
      width: 100%;
      text-align: center;
      /* flex-direction: column; */
    }
    .icon-animation {
      width: 60px;
      height: 60px;
      animation: iconRotate 1s linear infinite;
    }
    .desc {
      font-size: 14px;
      color: rgb(95, 89, 89);
    }
  }
</style>

在utils文件下创建一个名为loading的文件夹，文件夹下创建一个名为index.js和loading.js的文件

loading.js

import { createApp, nextTick } from 'vue';
import Loading from '@/components/loading';

// 创建Loading组件实例
const Mask = createApp(Loading);
const maskInstance = Mask.mount(document.createElement('div'));

// 更新是否显示
const toggleLoading = (el, binding) => {
   if (binding.value) {
       nextTick(() => {
           // 控制loading组件显示
           el.instance.visible = true;
           el.style.position = 'relative';
           // 插入到目标元素
           insertDom(el, el);
       });
   } else {
       el.instance.visible = false;
       el.style.position = 'static';
       el.mask && el.mask.parentNode && el.mask.parentNode.removeChild(el.mask);
   }
};

// 插入到目标元素
const insertDom = (parent, el) => {
   parent.appendChild(el.mask);
};

export default {
   // 第一次绑定到元素时调用
   mounted(el, binding) {
       // 用一个变量接住mask实例
       el.instance = maskInstance;
       el.mask = maskInstance.$el;
       el.maskStyle = {};
       binding.value && toggleLoading(el, binding);
   },
   // 所在组件的 VNode 更新时调用--比较更新前后的值
   updated(el, binding) {
       if (binding.oldValue !== binding.value) {
           toggleLoading(el, binding);
       }
   },
   // 指令与元素解绑时调用
   unmounted(el) {
       el.instance = null;
       el.mask = null;
       el.maskStyle = null;
   },
};

index.js

/**在Vue 3中，全局指令的注册需要使用app.directive方法，
 * 而不再需要在Vue上直接调用。在install方法中，
 * app参数代表Vue应用的实例，通过调用app.directive来注册全局指令。
 * 另外，由于Vue 3的模块化系统改变，导入Vue的方式也有所不同，
 * 不再需要import Vue from 'vue'，
 * 而是直接传递Vue应用的实例作为参数。 */
import Loading from './loading'

export default {
    install(app) {
        app.directive('myLoading', Loading)
    }
}

在main.js中引用

import DirectiveLoading from '@/utils/loading'
const app = createApp(App)
app.use(DirectiveLoading)

在页面使用

<template>
  <div v-myLoading="loading"></div>
</template>
<script>
  export default {
    data() {
      return {
        loading: false
      }
    }
  }
</script>