跟随Element学习Vue小技巧(33)——Loading

七秒记忆的鱼
1,334 阅读4分钟
❝

努力就是一种才能

乌龟努力的话

也可以赢过兔子啊

❞

前言

昨天，一兄弟回来，哥几个邀一起聚会，喝着喝着，都喝大了

一个哥们非说自己是奥特曼，然而这不是高潮,另几个竟然趴在地上演怪兽,你追我赶，打打闹闹，风一样的跑远了

当我和饭店老板从大笑中缓过神，老板一把抓住我, 「兄弟，你等一会儿再变身, 先把单给买了」 好像谁也不比谁聪明多少，只是慢了那么一拍，半拍！
所以，得加快进程，千万别一直Loading...

1 Loading

动作倒是挺炫酷的，貌似还是慢了一拍。。

动画animation

<div class="el-loading-spinner">
  <svg v-if="!spinner" class="circular" viewBox="25 25 50 50">
    <circle class="path" cx="50" cy="50" r="20" fill="none"/>
  </svg>
  <i v-else :class="spinner"></i>
  <p v-if="text" class="el-loading-text">{{ text }}</p>
</div>

.el-loading-spinner .circular {
  height: 42px;
  width: 42px;
  animation: loading-rotate 2s linear infinite;
}

@keyframes loading-rotate { 
  100% {
      transform: rotate(1turn);
  }
}

.el-loading-spinner .path {
  animation: loading-dash 1.5s ease-in-out infinite;
  stroke-dasharray: 90,150;
  stroke-dashoffset: 0;
  stroke-width: 2;
  stroke: #409eff;
  stroke-linecap: round;
}

@keyframes loading-dash { 
  0% {
    stroke-dasharray: 1,200;
    stroke-dashoffset: 0;
  }
  50% {
      stroke-dasharray: 90,150;
      stroke-dashoffset: -40px;
  }
  100% {
      stroke-dasharray: 90,150;
      stroke-dashoffset: -120px;
  }
}

技巧解析

❝

动画是怎么动起来的呢？
动画名+动画时长+动画方式+动画次数，还有好多好多...,传送门告诉你

彻底掌握css动画animation 传送门

❞
❝

1turn即一圈，90deg = 0.25turn
圆又是怎么消失出现的呢？
开始0%：满圆 中途50%：缺圆 结尾100%：无圆 从无到有，全靠stroke-dashoffset

SVG学习之stroke-dasharray 和 stroke-dashoffset详解 传送门

❞

index

扩展extend

  • 你根本不是我对手
  • 等我一下
  • 干嘛
  • 变个身
  • 就这
  • 搞错了，重来
  • 厉害厉害！！

代码片段

import loadingVue from './loading.vue';
const LoadingConstructor = Vue.extend(loadingVue);
LoadingConstructor.prototype.originalPosition = '';
LoadingConstructor.prototype.originalOverflow = '';
LoadingConstructor.prototype.close = function(){};

const Loading = (options = {}) => {
  ...
  let parent = options.body 
    ? document.body 
    : options.target;
  let instance = new LoadingConstructor({
    el: document.createElement('div'),
    data: options
  });
  parent.appendChild(instance.$el);
  Vue.nextTick(() => {
    instance.visible = true;
  });
  ...
  return instance;
}

export default Loading

技巧解析

❝

loading战斗力不够怎么办？
合体，变身，O(∩_∩)O哈哈~
1.vue.extend,包装一下
2.prototype，增强一下
3.new，做回自己
4.parent.appendChild，找马爸爸
5.变身 Vue-extend 传送门

❞

directive

指令directive

  • 服务员，上菜，上菜
  • 怎么又是你啊
  • 这次我带充电宝了
  • 可是，我们店有共享充电宝了呀 
import Loading from './loading.vue';
const Mask = Vue.extend(Loading);
Vue.directive('loading', {
  // 绑定，添加组件(DOM)
  bind: function(el, binding, vnode) {
    const mask = new Mask({
      el: document.createElement('div'),
      data: {
        text: vm && vm[textExr] || textExr,
        spinner: vm && vm[spinnerExr] || spinnerExr,
        background: vm && vm[backgroundExr] || backgroundExr,
        customClass: vm && vm[customClassExr] || customClassExr,
        fullscreen: !!binding.modifiers.fullscreen
      }
    });
    el.mask = mask.$el;
    ...
    const parent = document.body || el
    ...
    parent.appendChild(el.mask);
  },
  // 更新，刷新文字
  update: function(el, binding) {
    el.instance.setText(el.getAttribute('element-loading-text'));
    ...
  },
  // 解绑，移除并销魂
  unbind: function(el, binding) {
      if (el.domInserted) {
        el.mask &&
        el.mask.parentNode &&
        el.mask.parentNode.removeChild(el.mask);
        ...
      }
      el.instance && el.instance.$destroy();
    }
})

<template>
  <el-table
    v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
    :data="tableData"
    style="width: 100%">
    ...
  </el-table>
</template>

技巧解析

❝

指令三部曲：
bind + update + unbind
指令传值：
binding.value: v-xx="value"
binding.args: v-xx:arg
binding.modifiers: v-xx.modifier

今天再学一招，属性传值 el.getAttribute('element-loading-text')

自定义指令 传送门

❞



「我的梦里全是你」 「你就是我的梦啊」

参考链接

往期回顾

avatar
文章
阅读
粉丝