使用Vue.extend将UI组件转为js组件,通过函数调用来创建组件

一、示例效果

封装一个loading效果,通过函数去调用

加载时创建DOM,加载完删除DOM

二、Loading的封装

1. components/Loading/index.vue

js 复制代码
<template>
  <div class="loader">
    <div class="loader-inner">
      <div class="loader-line-wrap">
        <div class="loader-line"></div>
      </div>
      <div class="loader-line-wrap">
        <div class="loader-line"></div>
      </div>
      <div class="loader-line-wrap">
        <div class="loader-line"></div>
      </div>
      <div class="loader-line-wrap">
        <div class="loader-line"></div>
      </div>
      <div class="loader-line-wrap">
        <div class="loader-line"></div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.loader {
  background: rgba(0, 0, 0, 0.2);
  bottom: 0;
  left: 0;
  overflow: hidden;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 99999;
}
.loader-inner {
  bottom: 0;
  height: 60px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 100px;
}
.loader-line-wrap {
  animation: spin 2000ms cubic-bezier(0.175, 0.885, 0.32, 1.275) infinite;
  box-sizing: border-box;
  height: 50px;
  left: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  transform-origin: 50% 100%;
  width: 100px;
}
.loader-line {
  border: 4px solid transparent;
  border-radius: 100%;
  box-sizing: border-box;
  height: 100px;
  left: 0;
  margin: 0 auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 100px;
}
.loader-line-wrap:nth-child(1) {
  animation-delay: -50ms;
}
.loader-line-wrap:nth-child(2) {
  animation-delay: -100ms;
}
.loader-line-wrap:nth-child(3) {
  animation-delay: -150ms;
}
.loader-line-wrap:nth-child(4) {
  animation-delay: -200ms;
}
.loader-line-wrap:nth-child(5) {
  animation-delay: -250ms;
}
.loader-line-wrap:nth-child(1) .loader-line {
  border-color: hsl(0, 80%, 60%);
  height: 90px;
  width: 90px;
  top: 7px;
}
.loader-line-wrap:nth-child(2) .loader-line {
  border-color: hsl(60, 80%, 60%);
  height: 76px;
  width: 76px;
  top: 14px;
}
.loader-line-wrap:nth-child(3) .loader-line {
  border-color: hsl(120, 80%, 60%);
  height: 62px;
  width: 62px;
  top: 21px;
}
.loader-line-wrap:nth-child(4) .loader-line {
  border-color: hsl(180, 80%, 60%);
  height: 48px;
  width: 48px;
  top: 28px;
}
.loader-line-wrap:nth-child(5) .loader-line {
  border-color: hsl(240, 80%, 60%);
  height: 34px;
  width: 34px;
  top: 35px;
}
@keyframes spin {
  0%,
  15% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>

2. components/Loading/index.js

js 复制代码
import Vue from "vue";
import LoadingUI from "./index.vue";

const instance = () => {
  const JSloading = Vue.extend(LoadingUI);
  const loadingVm = new JSloading().$mount();
  return {
    show() {
      document.body.appendChild(loadingVm.$el);
    },
    hide() {
      loadingVm.$el.remove();
    }
  }
}
export default instance()

三、使用

1. 单文件引入使用

js 复制代码
import loading from "@/components/Loading";


    async getList() {
      try {
        loading.show();
        const res = await listApi1();
        console.log(res);
      } catch (err) {
        console.log(err);
      } finally {
        loading.hide();
      }
    }

2. 或者在main.js中进行全局注册

main.js

js 复制代码
import loading from "@/components/Loading";
Vue.prototype.$loading = loading

使用时不需要引入,直接通过this调用

js 复制代码
    async getList() {
      try {
        this.$loading.show();
        const res = await listApi1();
        console.log(res);
      } catch (err) {
        console.log(err);
      } finally {
        this.$loading.hide();
      }
    }

3. 也可以在axios拦截器中,给所有的接口都添加上loading

js 复制代码
import axios from 'axios'
import loading from "@/components/Loading";

const service = axios.create()

// request 拦截器
service.interceptors.request.use(
  config => {
    loading.show()
    return config
  },
  error => {
    loading.hide()
    return Promise.reject(error)
  }
)

// response 拦截器
service.interceptors.response.use(
  response => {
    loading.hide()
    return response.data.data
  },
  error => {
    loading.hide()
    return Promise.reject(error)
  }
)

export default service

类似的例子:www.cnblogs.com/wuqilang/p/...

相关推荐
拾光拾趣录4 分钟前
组件封装的⼀些基本准则
前端·前端工程化
CAD老兵5 分钟前
TypeScript 中如何转换两个具有相同值的枚举类型?
前端
1024小神8 分钟前
Cocos游戏开发中,检测两个物体碰撞,并实现物理反弹逻辑
前端·javascript
拾光拾趣录10 分钟前
Vue Router 执行顺序
前端·vue.js·vue-router
前端权11 分钟前
Vue3 多行文本溢出隐藏与展开收起功能实现总结
前端·vue.js
用户38022585982411 分钟前
vue3源码解析:调度器
前端·vue.js
Dolphin_海豚34 分钟前
electron windows 无边框窗口最大化时的隐藏边框问题
前端·electron·api
梦想CAD控件37 分钟前
WEB CAD与Mapbox结合实现在线地图和CAD编辑(CGCS2000)
前端·javascript·vue.js
AverageJoe19911 小时前
一次vite热更新不生效问题排查
前端·debug·vite