vue自定义指令v-loading(vue2和vue3)

效果

 

vue2写法

1. 目录结构:

2. 代码实现 

/directives/loading/loading.vue   loading效果页面(此处使用的antd下面的组件,可自定义)

<template>
    <div v-show="visible" class="loading-box">
      <a-spin tip="正在加载中,请耐心等待" />
    </div>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
    };
  },
};
</script>
<style scoped lang="less">
.loading-box {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(0 0 0 / 20%);;

    position: absolute;
    top: 0;
    left: 0;
}
</style>

/directives/loading/loading.js(实现loading组件的插入及销毁)

import Vue from 'vue'
import Loading from './loading.vue'

const Mask = Vue.extend(Loading)

const toggleLoading = (el, binding) => {
    if (binding.value) {
        Vue.nextTick(() => {
            // 控制loading组件显示
            el.instance.visible = true
            // 插入到目标元素
            insertDom(el, el, binding)
        })
    } else {
        el.instance.visible = false
    }
}

const insertDom = (parent, el) => {
    // 给父元素加个定位,让loading元素定位
    el.style.position='relative';
    parent.appendChild(el.mask)
}

export default {
    bind: function (el, binding, vnode) {
        const mask = new Mask({
            el: document.createElement('div'),
            data() { }
        })
        el.instance = mask
        el.mask = mask.$el
        el.maskStyle = {}
        binding.value && toggleLoading(el, binding)
    },
    update: function (el, binding) {
        if (binding.oldValue !== binding.value) {
            toggleLoading(el, binding)
        }
    },
    unbind: function (el, binding) {
        el.style.position='';
        el.instance && el.instance.$destroy()
    }
}

/directives/loading/index.js(loading指令的注册)

import loading from './loading';
export default {
  install(Vue) {
    Vue.directive("loading", loading) // 全局loading
  }
}

3. 全局引入(main.js文件)

// 引入loading
import loading from './vue-tool/directives/loading' 
Vue.use(loading);

4. 使用

<div v-loading="isLoading">我是loading父元素(isLoading为控制loading展示的自定义变量)</div>

vue3写法

1. 目录结构

2. 代码实现  

/directives/loading/index.vue   loading效果页面(此处使用的antd下面的组件,可自定义)

<template>
  <div class="loading-box">
    <a-spin tip="正在加载中,请耐心等待" />
  </div>
</template>

<script lang="ts" setup>
    import { } from 'vue';
</script>


<style scoped lang="less">
.loading-box {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(0 0 0 / 20%);

    position: absolute;
    top: 0;
    left: 0;
    :deep(.ant-spin-dot-item) {
      background-color: #FFF;
    }
    :deep(.ant-spin.ant-spin-show-text .ant-spin-text)  {
      color: #FFF;
    }
}
</style>

/directives/loading/index.ts(实现loading组件的插入及销毁)


import {createApp, Directive } from 'vue';
import Loading from './index.vue';

export const loading: Directive = {
    mounted(el,binding){
        const app = createApp(Loading);
        const instance = app.mount(document.createElement('div'));
        el.instance = instance;
        if (binding.value) {
            appendEl(el);
        }
    },
    updated(el,binding) {
        if (binding.value !== binding.oldValue) {
            binding.value ? appendEl(el) : removeEl(el); 
        }
    },
};
// 插入元素
const appendEl = (el) =>{
    // 给父元素加个定位,让loading元素定位
    el.style.position='relative';
    el?.appendChild(el.instance.$el);
};
// 移除元素
const removeEl = (el) =>{
    el.style.position='';

    // 踩坑:el?.removeChild(el.instance.$el)->直接这样写会报错:Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.(要删除的节点不是此节点的子节点)
    // 解决:判断一下是否为此节点的子元素再移除(参考:https://www.freesion.com/article/2620879355/)
    let $el = el.instance.$el;
    if (el?.contains($el)) {
        el?.removeChild($el);
    }
};

/directives/index.ts

export * from './loading'

3. 全局引入(main.js文件)

// 循环注册指令
import * as directives from './tool/directives';
Object.keys(directives).forEach(key => {
  Vue.directive(key, (directives as { [key: string ]: Directive })[key]);
});

4. 使用 v-loading=“”

补充:a-spin为antd组件,显示不了的可以把a-spin部分替换为一个简单的loading效果组件,下面提供两种可直接使用的:

1. 效果1

<template>
    <div class="ant-spin ant-spin-spinning">
        <span class="ant-spin-dot ant-spin-dot-spin">
            <i class="ant-spin-dot-item"></i>
            <i class="ant-spin-dot-item"></i>
            <i class="ant-spin-dot-item"></i>
            <i class="ant-spin-dot-item"></i>
        </span>
        <div class="ant-spin-text">正在加载中... ...</div>
    </div>
</template>

<style scoped>
.ant-spin {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    color: #000000d9;
    font-size: 14px;
    font-variant: tabular-nums;
    line-height: 1.5715;
    list-style: none;
    font-feature-settings: "tnum";
    position: absolute;
    display: none;
    color: #1890ff;
    text-align: center;
    vertical-align: middle;
    opacity: 0;
    transition: transform .3s cubic-bezier(.78,.14,.15,.86)
}
.ant-spin-spinning {
    position: static;
    display: inline-block;
    opacity: 1
}
.ant-spin-container {
    position: relative;
    transition: opacity .3s
}
.ant-spin-container:after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    display: none;
    width: 100%;
    height: 100%;
    background: #fff;
    opacity: 0;
    transition: all .3s;
    content: "";
    pointer-events: none
}
.ant-spin-blur {
    clear: both;
    opacity: .5;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    pointer-events: none
}
.ant-spin-blur:after {
    opacity: .4;
    pointer-events: auto
}
.ant-spin-tip {
    color: #00000073
}
.ant-spin-dot {
    position: relative;
    display: inline-block;
    font-size: 20px;
    width: 1em;
    height: 1em
}
.ant-spin-dot-item {
    position: absolute;
    display: block;
    width: 9px;
    height: 9px;
    background-color: #1890ff;
    border-radius: 100%;
    transform: scale(.75);
    transform-origin: 50% 50%;
    opacity: .3;
    animation: antSpinMove 1s infinite linear alternate
}
.ant-spin-dot-item:nth-child(1) {
    top: 0;
    left: 0
}
.ant-spin-dot-item:nth-child(2) {
    top: 0;
    right: 0;
    animation-delay: .4s
}
.ant-spin-dot-item:nth-child(3) {
    right: 0;
    bottom: 0;
    animation-delay: .8s
}
.ant-spin-dot-item:nth-child(4) {
    bottom: 0;
    left: 0;
    animation-delay: 1.2s
}
.ant-spin-dot-spin {
    transform: rotate(45deg);
    animation: antRotate 1.2s infinite linear
}
.ant-spin-sm .ant-spin-dot {
    font-size: 14px
}
.ant-spin-sm .ant-spin-dot i {
    width: 6px;
    height: 6px
}
.ant-spin-lg .ant-spin-dot {
    font-size: 32px
}
.ant-spin-lg .ant-spin-dot i {
    width: 14px;
    height: 14px
}
.ant-spin.ant-spin-show-text .ant-spin-text {
    display: block
}
@media all and (-ms-high-contrast: none),(-ms-high-contrast: active) {
    .ant-spin-blur {
        background: #fff;
        opacity: .5
    }
}
.ant-spin-rtl {
    direction: rtl
}
.ant-spin-rtl .ant-spin-dot-spin {
    transform: rotate(-45deg);
    animation-name: antRotateRtl
}
@keyframes antSpinMove {
    to {
        opacity: 1
    }
}
@keyframes antRotate {
    to {
        transform: rotate(405deg)
    }
}
</style>

2. 效果2

<template>
    <div class="loading">
        <div class="circle"></div>
        <span>加载中... ...</span>
    </div>
</template>

<style scoped>
.loading {
    color: #1890ff;
    font-size: 12px;

    display: flex;
    flex-direction: column;
    align-items: center;
}
.circle{
    width: 18px;
    height: 18px;
    border: 2px white solid;
    border-left-color: #1890ff;
    border-right-color:#1890ff;
    border-radius: 100%;
    animation: loading1 1s infinite linear;

    margin-bottom: 5px;
}
@keyframes loading1{
    from{transform: rotate(0deg)}to{transform: rotate(360deg)}
}
</style>

  • 4
    点赞
  • 22
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
v-loading是一个Vue.js的指令,用于在数据请求过程中显示加载状态。通过在元素上使用v-loading指令,可以实现全局或局部的加载效果。 全局加载效果是指在整个页面范围内显示加载中的状态,直到数据请求完成后消失。可以在Vue的template中使用<div v-loading="loading"></div>的方式来实现全局加载效果。其中loading是一个数据属性,用于控制加载状态的显示与隐藏。 局部加载效果是指在特定区域内显示加载中的状态。可以通过在绑定了v-loading指令的元素上添加element-loading-text、element-loading-spinner和element-loading-background属性来自定义加载文案、加载图标和背景色值。例如<div v-loading="true" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)"></div>。 需要注意的是,如果将v-loading指令写在template下的顶层元素上,就不会触发全屏加载效果,而只会在该元素内部显示局部加载效果。例如在Vue的template中使用<div><section v-loading="loading"></section></div>的方式来实现局部加载效果。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [Vue进阶(一):v-loading实现加载效果](https://blog.csdn.net/qq_45516629/article/details/106265213)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* [v-loading使用(来自官网介绍)](https://blog.csdn.net/sherpan/article/details/97935370)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值