在前端我们调用接口等待的过程中我们经常会用到遮罩层 loading 的效果,结果返回后遮罩层消息
# 定义一个组件 (MaskLayer)
| <template> |
| <div :class="[show ? 'show' : '', 'kl-mask-load']"> |
| <div class="load"> |
| <div class="square"> |
| <div class="Round0"></div> |
| <div class="Round1"></div> |
| <div class="Round2"></div> |
| <div class="Round3"></div> |
| </div> |
| <div class="square squareRotate"> |
| <div class="Round4"></div> |
| <div class="Round5"></div> |
| <div class="Round6"></div> |
| <div class="Round7"></div> |
| </div> |
| <span style="font-size: 12px; position: absolute; bottom: 0px; left: 28px" |
| ><!--swig0--></span |
| > |
| </div> |
| <slot></slot> |
| </div> |
| </template> |
| |
| <script setup> |
| import { defineProps } from 'vue' |
| |
| const props = defineProps({ |
| show: { |
| default: true, |
| type: Boolean, |
| }, |
| text: { |
| default: "加载中...", |
| type: String |
| } |
| }) |
| </script> |
| |
| <style scoped> |
| .kl-mask-load { |
| z-index: 9999; |
| background-color: #0a4d39; |
| opacity: 0; |
| position: absolute; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| top: 0; |
| transition: opacity 0.2s ease-in; |
| display: grid; |
| align-items: center; |
| place-items: center; |
| pointer-events: none; |
| } |
| |
| .kl-mask-load.show { |
| opacity: 0.3; |
| pointer-events: auto; |
| transition: opacity 0.2s ease-in; |
| } |
| |
| .load { |
| display:block; |
| background-color: #fff; |
| position: absolute; |
| left: 0; |
| right: 0; |
| top: 0; |
| bottom: 0; |
| margin: auto; |
| width: 90px; |
| height: 90px; |
| z-index: 100000; |
| border-radius: 10px; |
| text-align: center; |
| } |
| |
| .square { |
| position: absolute; |
| height: 40px; |
| width: 40px; |
| top: 0; |
| bottom: 0; |
| left: 0; |
| right: 0px; |
| margin: auto; |
| } |
| |
| .Round0, |
| .Round1, |
| .Round2, |
| .Round3, |
| .Round4, |
| .Round5, |
| .Round6, |
| .Round7 { |
| width: 8px; |
| height: 8px; |
| border-radius: 50%; |
| background-color: aqua; |
| position: absolute; |
| animation: loadding 1.2s both infinite; |
| } |
| |
| .Round0 { |
| top: 0; |
| left: 0; |
| animation-delay: 0s; |
| } |
| |
| .Round1 { |
| top: 0; |
| right: 0; |
| animation-delay: 0.3s; |
| } |
| |
| .Round2 { |
| bottom: 0; |
| left: 0; |
| animation-delay: 0.5s; |
| } |
| |
| .Round3 { |
| bottom: 0; |
| right: 0; |
| animation-delay: 0.7s; |
| } |
| |
| .Round4 { |
| top: 0; |
| left: 0; |
| animation-delay: 0.2s; |
| } |
| |
| .Round5 { |
| top: 0; |
| right: 0; |
| animation-delay: 0.4s; |
| } |
| |
| .Round6 { |
| bottom: 0; |
| left: 0; |
| animation-delay: 0.6 s; |
| } |
| |
| .Round7 { |
| bottom: 0; |
| right: 0; |
| animation-delay: 0.8s; |
| } |
| |
| .squareRotate { |
| transform: rotate(45deg); |
| } |
| |
| @keyframes loadding { |
| 0% { |
| transform: scale(0); |
| } |
| |
| 40% { |
| transform: scale(1); |
| } |
| |
| 80% { |
| transform: scale(0); |
| } |
| |
| 100% { |
| transform: scale(0); |
| } |
| } |
| </style> |
# 定义一个 js 文件
| import { |
| createApp, |
| defineComponent, |
| createVNode, |
| render |
| } from "vue"; |
| import MaskLayer from "../components/MaskLayer.vue"; |
| |
| const app = createApp({}); |
| |
| const container = document.createElement('div') |
| const maskLayerInstance = { |
| install: function (text) { |
| if (text) { |
| const vm = createVNode( |
| MaskLayer, { |
| text: text, |
| show: true |
| } |
| ) |
| render(vm, container) |
| } else { |
| const vm = createVNode( |
| MaskLayer, { |
| text: '加载中', |
| show: true |
| } |
| ) |
| render(vm, container) |
| } |
| document.body.appendChild(container) |
| }, |
| close: function () { |
| const vm = createVNode( |
| MaskLayer, { |
| text: '', |
| show: false |
| } |
| ) |
| render(vm, container) |
| document.body.appendChild(container) |
| |
| } |
| } |
| |
| export default maskLayerInstance |
# 在 main.ts 中 (挂载到 vue 实例上)
| import { createApp } from 'vue'; |
| const app = createApp(App); |
| import MaskLayer from '/@/common/js/MaskLayer' |
| app.config.globalProperties.$loading=MaskLayer |
| app.mount('#app'); |
# 在组件中使用
| <script lang="ts" setup> |
| const instance = getCurrentInstance(); |
| |
| instance.appContext.config.globalProperties.$loading.install() |
| |
| setTimeout(() => { |
| instance.appContext.config.globalProperties.$loading.close(); |
| }, 5000); |
| </script> |