Vue 2.x折騰記 - (15) 搗鼓一箇中規中矩loading組件

前言

最近有一個新的項目，UI大佬不知道從哪裏找來了一張GIF丟到藍湖，

說做爲全局的頁面loading ，可是本身想了想，仍是選擇畫一個。

一開始想過用svg,canvas,最終仍是選擇了css3+js來實現這個效果。

gif的缺點挺多,至於爲何又排除了svg和canvas，是由於css3+js可控性更強，

無論是大小仍是顏色，仍是響應式(個人項目走的vh,vw)那套來適配；

---

效果

UI大佬提供的GIF

實現的效果【在線codesandbox預覽】

• 支持環的顏色改變及整個展現大小
• 支持在loading底部顯示文字並控制其樣式

實現思路

這個東東主要用了這麼幾個要點來實現完整的效果；

• flex和position來佈局
• 僞類的顏色繼承(currentColor)
• 邊框結合圓角實現環
• 用了transform和animation來實現了整個過渡

效果知道怎麼實現了，剩下的就是咱們須要實現的功能點了；

由於是面向移動端的,因此這些常規的東東也要考慮下

• 遮罩層可控
• 防止點擊穿透滾動body
• 組件支持函數方法調用

源碼

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: {  // 最外環的大小，內二環是比例換算的(百分比)
      type: Object,
      default: function() {
        return {
          width: "100px",
          height: "100px",
          color: "#407af3"
        };
      }
    }

複製代碼

用法

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

除了常規的引入使用，還支持函數調用,掛載了一個$loading。

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

複製代碼

總結

props的傳遞沒有作增量合併(遞歸每一個key賦值)，直接淺複製合併的。

對於組件功能的概而全，拓展性，大小須要本身權衡；

到這裏，咱們業務須要的一個小組件，該有的功能都有了。

有不對之處請留言，會及時修正。