Vue 折腾记

前言

有需求,就要动手丰衣足食…公司考虑兼容IE9,那么css3 animation写的loading就无缘了
因为keyframes IE10+ , 那么要实现会动且可控的(颜色,大小),好像就剩下svg大佬了;

依旧不废话,看效果图

• 2017-07-26: 调整了样式,加入了可控的提示文字

---

效果图

先说说实现的思路

• 一个遮罩层,一个显示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 loadingexport { 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组件就实现了..有更好的方案和实现思路可以往下面留言…

浪里个浪~~~