通过自定义组件学习Vue系列（八）【全局css样式loading条】（附源码）

静态效果

动态效果

实现思路

1、不用gif图片，直接用css样式实现进度条效果

2、用js文件将组件vue进行封装，封装两个全局方便，打开和关闭

3、main.js引用定义的js文件，即可以全局进行调用了

样式代码

.mask1 {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
}


.loader {
    border: 10px solid #f3f3f3;
    border-radius: 50%;
    border-top: 10px solid #3498db;
    width: 60px;
    height: 60px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
  }
  
  @-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

Js封装代码

import Loading from '@/components/Loading.vue'
let ConfirmConstructor, instance

const showLoading = {
  install(Vue) {
    ConfirmConstructor = Vue.extend(Loading)
    instance = new ConfirmConstructor().$mount()
    document.body.appendChild(instance.$el)

    Vue.prototype.$showLoading = options => {
      Object.assign(instance, options)
      instance.init()
    }

    Vue.prototype.$closeLoading = options => {
        Object.assign(instance, options)
        console.log("close")
        instance.close()
    }

  }
}

export default showLoading

组件vue代码

<template>
    <div v-if="show" class="mask1 flex flex-center-sp flex-center-cz">
        <div class="loader"></div>
    </div>

</template>

<script>
     export default {
        name:'Loading',
        data() {
            return {
                show: false
            }
        },
        methods:{
            init() {
                this.show = true;
            },
            close() {
                console.log("close")
                this.show = false;
            }
        }
     }
</script>

调用代码

      LoadingClick() {
        this.$showLoading();
        setTimeout(() => {
          this.$closeLoading();
        }, 1000);

      } 

源码下载

https://download.csdn.net/download/gdgztt/87694662

相关文章

通过自定义组件学习Vue系列（八）【全局css样式loading条】（附源码）

通过自定义组件学习Vue系列（七）【权限树组件】（附源码）

通过自定义组件学习Vue系列（六）【日期输入框】（附源码）

通过自定义组件学习Vue系列（五）【下拉多选框】（附源码）

通过自定义组件学习Vue系列（四）【导航菜单】（附源码）

通过自定义组件学习Vue系列（三）【仿浏览器缩放比例】（附源码）

通过自定义组件学习Vue系列（二）【时间轴】（附源码）

通过自定义组件学习Vue系列（一）【开关按钮】（附源码）