基于Vue 實現(xiàn)一個中規(guī)中矩loading組件

更新時間：2019年04月03日 11:28:45 作者：crper

這篇文章主要介紹了基于Vue 實現(xiàn)一個中規(guī)中矩loading組件,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下

前言

最近有一個新的項目，UI大佬不知道從哪里找來了一張GIF丟到藍湖，說作為全局的頁面loading ，但是自己想了想，還是選擇畫一個。

一開始想過用svg,canvas;最終還是選擇了css3+js來實現(xiàn)這個效果；

gif的缺點挺多,至于為什么又排除了svg和canvas；

是因為css3+js可控性更強，不管是大小還是顏色，還是響應(yīng)式(我的項目走的vh,vw)那套來適配；

可以借助打包插件，達到loading的大小適配;

效果

UI大佬提供的GIF

實現(xiàn)的效果【在線codesandbox預(yù)覽】

支持環(huán)的顏色改變及整個展示大小
支持在loading底部顯示文字并控制其樣式

實現(xiàn)思路

這個東東主要用了這么幾個要點來實現(xiàn)完整的效果；

flex和position來布局
偽類的顏色繼承(currentColor)
邊框結(jié)合圓角實現(xiàn)環(huán)
用了transform和animation來實現(xiàn)了整個過渡

效果知道怎么實現(xiàn)了，剩下的就是我們需要實現(xiàn)的功能點了；

因為是面向移動端的,所以這些常規(guī)的東東也要考慮下

遮罩層可控
防止點擊穿透滾動body
組件支持函數(shù)方法調(diào)用

源碼

Loading.vue

<template>
 <div id="loading-wrapper">
 <div class="loading-ring" :style="ringStyle">
  <div class="outer" />
  <div class="middle" />
  <div class="inner" />
 </div>
 <div class="text" :style="textStyle" v-if="text">
  {{ text }}
 </div>
 </div>
</template>

<script>
export default {
 name: "Loading",
 props: {
 text: {
  type: String,
  default: ""
 },
 textStyle: {
  type: Object,
  default: function() {
  return {
   fontSize: "14px",
   color: "#fff"
  };
  }
 },
 ringStyle: {
  type: Object,
  default: function() {
  return {
   width: "100px",
   height: "100px",
   color: "#407af3"
  };
  }
 }
 },
 methods: {
 preventDefault(e) {
  // 禁止body的滾動
  console.log(e);
  e.preventDefault();
  e.stopPropagation();
 }
 },
 mounted() {
 document
  .querySelector("body")
  .addEventListener("touchmove", this.preventDefault);
 },
 destroyed() {
 document
  .querySelector("body")
  .removeEventListener("touchmove", this.preventDefault);
 }
};
</script>

<style lang="scss" scoped>
#loading-wrapper {
 position: fixed;
 left: 0;
 top: 0;
 height: 100vh;
 width: 100vw;
 background-color: rgba(0, 0, 0, 0.25);
 display: flex;
 justify-content: center;
 align-items: center;
 flex-direction: column;
 .loading-ring {
 position: relative;
 width: 200px;
 height: 200px;
 .outer,
 .inner,
 .middle {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: currentColor;
  &::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  border-left: 10px solid currentColor;
  border-right: 10px solid currentColor;
  border-top: 10px solid currentColor;
  border-bottom: 10px solid transparent;
  }
 }

 .outer {
  width: 100%;
  height: 100%;
  &::after {
  animation: anticlockwise 1.5s infinite linear;
  }
 }
 .inner {
  width: calc(100% * 0.6);
  height: calc(100% * 0.6);
  &::after {
  animation: anticlockwise 1.5s infinite linear;
  }
 }
 .middle {
  width: calc(100% * 0.8);
  height: calc(100% * 0.8);
  &::after {
  animation: clockwise 1.5s infinite linear;
  }
 }
 }

 .text {
 color: #fff;
 font-size: 14px;
 padding: 30px;
 width: 250px;
 text-align: center;
 }
}

@keyframes clockwise {
 0% {
 transform: rotate(0deg);
 }
 100% {
 transform: rotate(360deg);
 }
}
@keyframes anticlockwise {
 0% {
 transform: rotate(0deg);
 }
 100% {
 transform: rotate(-360deg);
 }
}
</style>

index.js

import Loading from "./Loading.vue";
// 來保持實例，單例模式
let instance;
let el;

Loading.install = function(Vue, options = {}) {
 const defaultOptions = {
 text: "",
 textStyle: {
  fontSize: "14px",
  color: "#fff"
 },
 ringStyle: {
  width: "100px",
  height: "100px",
  color: "#407af3"
 },
 ...options
 };
 Vue.prototype.$loading = {
 show(options = {}) {
  if (!instance) {
  let LoadingInstance = Vue.extend(Loading);
  el = document.createElement("div");
  document.body.appendChild(el);
  instance = new LoadingInstance({
   propsData: { defaultOptions, ...options }
  }).$mount(el);
  } else {
  return instance;
  }
 },
 hide() {
  if (instance) {
  document.body.removeChild(document.getElementById("loading-wrapper"));
  instance = undefined;
  }
 }
 };
};

export default Loading;

選項及用法

選項

 text: { // 這個不為空就在loading下面顯示文字
  type: String,
  default: ""
 },
 textStyle: { // loading text 的樣式，顏色及字體大小
  type: Object,
  default: function() {
  return {
   fontSize: "14px",
   color: "#fff"
  };
  }
 },
 ringStyle: { // 最外環(huán)的大小，內(nèi)二環(huán)是比例換算的(百分比)
  type: Object,
  default: function() {
  return {
   width: "100px",
   height: "100px",
   color: "#407af3"
  };
  }
 }

用法

在主入口use一下便可全局使用

除了常規(guī)的引入使用，還支持函數(shù)調(diào)用,掛載了一個$loading。

this.$loading.show({
  text: "loading",
  textStyle: {
   fontSize: "18px",
   color: "#f00"
  }
  });
  
let st = setTimeout(() => {
  clearTimeout(st);
  this.$loading.hide();
 }, 1000);

總結(jié)

props的傳遞沒有做增量合并(遞歸每個key賦值)，直接淺復(fù)制合并的對于組件功能的概而全，拓展性，大小需要自己權(quán)衡；

到這里，我們業(yè)務(wù)需要的一個小組件，該有的功能都有了。

以上所述是小編給大家介紹的基于Vue 實現(xiàn)一個中規(guī)中矩loading組件，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: