【vue3】自定义插件-全屏加载插件实现

【vue3】自定义插件-全屏加载插件实现

在开发界面功能时候，是不是要用一点UI组件库或者插件，用别人的总不能高度定制化直接的界面和需求，然后我就尝试自己实现一些插件。

先简单的实现一个全屏加载的插件。开启加载this.$loading(title{:}^{\prime }系统提{示}^{\prime })。关闭加载this.$loading.close()。方便自己使用。

随手写了个界面，很简略的表达了加载状态，一个旋转的方块加一个背景遮罩层。
index.vue

<template>
  <div class="box">
    <div class="loading">
      <div class="icon">
        {{title}}
      </div>
    </div>
  </div>
</template>

<script setup>
defineProps({
  title: {
    type: String,
    default:'标题'
  }
})

</script>

<style lang="scss" scoped>
.box{
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  .loading{
    height: 300px;
    width: 300px;
    background: rgba(0, 183, 255, 0.75);
    animation: 1s loading infinite;
    text-align: center;
    line-height: 300px;
  }
}

@keyframes loading {
  from {
    transform: rotate(0);
  }
  to{
    transform: rotate(360deg);
  }
}
</style>

插件自身实现
index.js

/**
 * ======================================
 * 全屏加载
 * author: admin
 * file: index.js
 * date: 2022/10/20 15:09
 * ======================================
 */
import { createVNode,  render } from 'vue'
import component from './index.vue'
/**
 * 加载
 * @param options
 */
const loading = function(options) {
  const body = document.body
  const container = document.createElement('div')
  const props = {
    date:+new Date(),
    title:options.title
  }
  const vm = createVNode(
    component,
    props
  )
  render(vm,container)
  console.log("vm",vm)
  const el = container.firstElementChild
  body.appendChild(el) //$el  保存实例生成的dom元素
  loading['context'] = el
}
loading['context'] = null
loading['close'] = () => {
  if(loading['context']){
    const body = document.body
    body.removeChild(loading['context'])
  }
}
const Loading = loading
export {Loading}
export default Loading

插件注册
loading.js

import { Loading } from './components'
export default {
  install(app,option) {
    // 组件注册
    app.config.globalProperties.$loading = Loading
  }
}

main.js

import Loading from './Loading'
app.use(Loading )

然后就可以全局使用
开启加载
this.$loading({title:‘系统提示’})

关闭加载
this.$loading.close()

效果

全屏加载插件