第六集: 从零开始实现一套pc端vue的ui组件库( loading )组件

第六集: 从零开始实现(loading组件 )

本集定位 :
loading组件我相信只要与后端存在交互的项目都是需要它的, 组件虽然简单, 但他的作用十分重要:

1. 让用户有一个良好的体验, 也就是反馈给用户一个信号, '我正在做, 再等等...'.
2. 遮挡住用户的操作, 也就是此期间(有可能)不让用户再去触发其他事件.
3. 不让用户看到白屏, 看到白屏的体验差到爆炸啊.
4. 各种炫酷的效果, 也是吸睛的一种手段.

一: loading需求分析

1. 出现之时, 要遮挡用户的操作.
2. 不依赖dom, 要通过js就能控制它的出现与隐藏, 比如配置axios.
3. 充满父级, 而不是充满body, 因为是pc端, 所以不是小黑块的形式.

屏幕上方进度条的讨论
我去年的工程里面用的进度条, 体验太差了, 不够显眼, 屏幕上不能点击让人懵圈, 所以本次不用.

骨架屏的讨论
    下一章会做(简易版骨架屏).
很多技术方向, 是为了完美展示dom结构的阴影, 1:1的还原还未加载出的dom的样子, 其实我感觉不用这样把.... 只是个过渡阶段有个大致的样子就可以了, 更多的精力与能力放在业务上, 据我观察了很多app, 真的100%还原的真的不多, 而且我问过很多朋友是否注意到骨架屏与真实的dom结构存在偏差, 全都说没注意到, 所以骨架屏这方面本套组件只做最基本的功能.

二: 基础结构的搭建
模板

<template>
// 老规矩:
  <div class="cc-loading">
// 黑色的遮罩层
    <div class="cc-loading__curtain"/>
    // icon与内容显示区
    <section class="cc-loading__icon">
    // icon组件
      <ccIcon :name='iconName'
              :color='iconColor' />
    // 显示的提示文字
      <span>{{title}}</span>
    </section>
</template>

js

props: {
    title: {
      type: String,
      default: "加载中 . . ."
    },
    iconName: {  // 加载图标的样子肯定是用户自定义的
      type: String,
      default: "cc-load1" // 默认就是普通的菊花
    },
    iconColor: { // 图标的颜色也是用户自己定的, 万一有特殊需求
      type: String,
      default: "#3F8BDB"
    }
  }

css部分, 针对居中与定位都有封装.

@import './common/var.scss';
@import './common/extend.scss';
@import './common/mixin.scss';

@include b(loading) {
    @include position();
    &__curtain{
        @include position();
    }
    &__icon{
        position: absolute;
        color: $--color-nomal;
        z-index: 10;
        @include flexCenter;
        @include position();
        :nth-child(1){ // 文字与图标分的开一些
            margin-bottom:6px;
        }
    }
}

src/style/common/mixin.scss

@mixin position($position: absolute) {
  margin: auto;
  position: $position;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

@mixin flexCenter {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}

使用显示

// 需要显示的时候, 让这个dom显示即可, 因为默认是对浏览器定位的.
<cc-loading v-if='show' />

三: 针对父级定位, 而不是全局的loading
其实很简单, 也就是属性的差别, 把fixed定位换掉即可, 都可以换上吸附属性浪一浪
让我来加很多友好的属性

<template>
  <div class="cc-loading"
       :style="{
           'zIndex':boxZIndex,  // 层级
           'position': position // 定位方式
        }">
    <div class="cc-loading__curtain"
         :style="{
             'opacity':opacity, // 这个层的透明度也会友好的让用户填写
             'background-color':curtainColor  // 颜色也是用户选
            }" />
    <section class="cc-loading__icon"
          :style="{
              'fontSize':iconSize+'px'   // 图标的大小
              }">
      <ccIcon :name='iconName'
              :color='iconColor' />
      <span :style="{
          'fontSize':textFontSize+'px', // 文字的大小
          'color':textColor  // 文字的颜色
          }">{{title}}</span>
    </section>

  </div>
</template>

js, 这里面的默认值都是本套工程的共用值;

props: {
    position: {
      type: String,
      default: "fixed"
    },
    title: {
      type: String,
      default: "加载中 . . ."
    },
    textColor: {
      type: String,
      default: "#3F8BDB"
    },
    opacity: {
      type: Number,
      default: 0.8
    },
    iconName: {
      type: String,
      default: "cc-load1"
    },
    iconColor: {
      type: String,
      default: "#3F8BDB"
    },
    curtainColor: {
      type: String,
      default: "black"
    },
    boxZIndex: {
      type: Number,
      default: 100
    },
    textFontSize: {
      type: Number,
      default: 17
    },
    iconSize: {
      type: Number,
      default: 25
    }
  },

效果展示

四: 添加事件与js编程式调用

其实就算是蒙层状态, 也要给个点击事件, 比如用户点了很多下, 可以给用户弹出一个'马上好,再点受不了了...', 用户可以自己通过native修饰符去做, 但是那样太不工程化了.

<div class="cc-loading"
       @click.stop="onClickLoading">

onClickLoading() {
      this.$emit("click");
    }

别忘了加stop修饰符, 不然点击穿透可就坏事了.

我们更多时候是要从js的方式控制加载状态的
vue-cc-ui/src/components/loading/main/loading.js

// 引入写好的组件
import Loading from './loading.vue';

Loading.install = function(Vue) {
// 注册一下才能使用
  Vue.component(Loading.name, Loading);
// 在原型上挂在一波
  Vue.prototype.$ccShowLoading = function(options) {
// extend也就是实例化这个组件
    let Constructor = Vue.extend(Loading);
    let node = new Constructor({
      propsData: options // 所有的配置也都如数传进去
    });
    // 执行到他的钩子
    node.vm = node.$mount();
    // 插入body, 因为这个就没必要插入固定的父级了, 用户自己传也可以
    document.body.appendChild(node.$el);
  };
// 有出现就要有消失
  Vue.prototype.$ccHiddenLoading = function() {
   // 从body上面找到class为这个的元素就干掉.
    document.body.childNodes.forEach(item => {
      if (item.className === 'cc-loading') {
        document.body.removeChild(item);
      }
    });
  };
};

export default Loading;

下一章: 简易版骨架屏
欢迎大家一起进步!

github: 链接描述
个人网站: 链接描述