Vue 2.x折騰記 - (4) 寫一個不大靠譜的 loading 組件

前言

有需求,就要動手豐衣足食...公司考慮兼容IE9,那麼css3 animation寫的loading就無緣了。

由於keyframes IE10+ , 那麼要實現會動且可控的(顏色,大小),好像就剩下svg大佬了;

效果圖

先說說實現的思路

• 一個遮罩層,一個顯示loading...通用法則
• svg動效的loading直接git上找,一搜一大堆;(會寫動效svg的小夥伴贊一個,我沒時間研究這個)
• 遮罩層有兩種狀況下,一個是全局fixed,一個是相對relative的absolute,因此這塊抽離
• svg要可控顏色大小,那麼必須是svg代碼渲染,圖片引入是無法更改的

你能學到什麼?

• props的字段限制,默認值
• computed的運用
• 部分webpack配置的改動
• svg一丟丟知識

大致就這樣了,再來講說爬的坑

• svg能夠繼承顏色和大小(css),前提哈,svg內置代碼沒有fill(填充的顏色),width,height ,因此要刪除掉那三個屬性, 上碼

// 記得刪除,通常用軟件生成的svg導出都有帶這些屬性,刪除後默認爲黑色
<svg class="icon-loading" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="red">
  <path transform="translate(-8 0)" d="M4 12 A4 4 0 0 0 4 20 A4 4 0 0 0 4 12"> 
    <animateTransform attributeName="transform" type="translate" values="-8 0; 2 0; 2 0;" dur="0.8s" repeatCount="indefinite" begin="0" keytimes="0;.25;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8" calcMode="spline" />
  </path>
  <path transform="translate(2 0)" d="M4 12 A4 4 0 0 0 4 20 A4 4 0 0 0 4 12"> 
    <animateTransform attributeName="transform" type="translate" values="2 0; 12 0; 12 0;" dur="0.8s" repeatCount="indefinite" begin="0" keytimes="0;.35;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8" calcMode="spline" />
  </path>
  <path transform="translate(12 0)" d="M4 12 A4 4 0 0 0 4 20 A4 4 0 0 0 4 12"> 
    <animateTransform attributeName="transform" type="translate" values="12 0; 22 0; 22 0;" dur="0.8s" repeatCount="indefinite" begin="0" keytimes="0;.45;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8" calcMode="spline" />
  </path>
  <path transform="translate(24 0)" d="M4 12 A4 4 0 0 0 4 20 A4 4 0 0 0 4 12"> 
    <animateTransform attributeName="transform" type="translate" values="22 0; 32 0; 32 0;" dur="0.8s" repeatCount="indefinite" begin="0" keytimes="0;.55;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8" calcMode="spline" />
  </path>
</svg>

複製代碼

• webpack你如果配置url-loader , 好比vue-cli默認的配置寫了會把svg轉爲base64, 解決方案是拆開,引入一個raw-loader,能夠保證svg代碼不會轉化爲url或者base64,上碼

{
    test: /\.(png|jpe?g|gif)(\?.*)?$/,
    loader: "url-loader",
    options: {
      limit: 10000,
      name: utils.assetsPath("img/[name].[hash:7].[ext]")
    }
  },
  {
    test: /\.(svg)(\?.*)?$/,
    loader: "raw-loader",
  }
複製代碼

有什麼特性!

• svg大小,顏色,類型可控
• 遮罩層的樣式可控

代碼

index.js -- 先把svg默認所有導出

// 引入全部svg loading

export { default as balls } from "./loading-balls.svg";
export { default as bars } from "./loading-bars.svg";
export { default as bubbles } from "./loading-bubbles.svg";
export { default as cubes } from "./loading-cubes.svg";
export { default as cylong } from "./loading-cylon.svg";
export { default as cylongred } from "./loading-cylon-red.svg";
export { default as spin } from "./loading-spin.svg";
export { default as spinning } from "./loading-spinning-bubbles.svg";
export { default as spokes } from "./loading-spokes.svg";


複製代碼

loading.vue

<template>
  <div class="loading-layout" :style="layoutLoadingStyle">
    <div class="loading">
      <p v-html="svgShow" :style="svgStyle"></p>
      <p class="loadingText" :style="{color:svgColor}" v-if="showText">{{loadingText}}</p>
    </div>
  </div>
</template>

<script> // 引入全部svg loading import * as allsvg from './svg'; export default { name: 'loading', data: function () { return {} }, props: { svgType: { type: String, // 字符串類型 default: 'bars' // 默認的loading圖形 }, svgColor: { type: String, default: '#20a0ff' }, svgSize: { type: Object, // 對象類型 default: function () { return { width: '50px', height: '50px' } } }, showText:{ // 是否顯示loading文本 type: Boolean, default:false, }, loadingText: { type: String, default: '拼命加載中....' }, lbgColor: { // loading包裹層的樣式 type: Object, default: function () { return { color: 'rgba(255,255,255,.5)' } } }, lsize: { type: Object, // 對象類型 default: function () { return { width: '100%', height: '100%' } } }, lpos: { type: Object, default: function () { return { // 遮罩層初始化位置 position: 'absolute', top: '0', left: '0' } } } }, computed: { svgShow () { return allsvg[this.svgType]; }, svgStyle () { return { fill: this.svgColor, width: this.svgSize.width, height: this.svgSize.height } }, layoutLoadingStyle () { return { position: this.lpos.position, top: this.lpos.top, left: this.lpos.left, width: this.lsize.width, height: this.lsize.height, 'background-color': this.lbgColor.color } } } } </script>

<style scoped lang="scss"> .loading-layout { position: relative; height: 100%; width: 100%; z-index: 2001; .loading { position: absolute; top: 50%; left: 45%; transform: translate(-50%, -50%); text-align: center; p { margin: 0 auto; } svg { fill: inherit; height: inherit; width: inherit; } } .loadingText { white-space: nowrap; } } </style>


複製代碼

總結

自此,一個不大靠譜的loading組件就實現了，有更好的方案和實現思路能夠往下面留言，謝謝閱讀