摘要：第六集從零開始實(shí)現(xiàn)組件本集定位組件我相信只要與后端存在交互的項(xiàng)目都是需要它的組件雖然簡單但他的作用十分重要讓用戶有一個(gè)良好的體驗(yàn)也就是反饋給用戶一個(gè)信號我正在做再等等遮擋住用戶的操作也就是此期間有可能不讓用戶再去觸發(fā)其他事件不讓用戶看到白屏

本集定位 :
loading組件我相信只要與后端存在交互的項(xiàng)目都是需要它的, 組件雖然簡單, 但他的作用十分重要:

讓用戶有一個(gè)良好的體驗(yàn), 也就是反饋給用戶一個(gè)信號, "我正在做, 再等等...".

遮擋住用戶的操作, 也就是此期間(有可能)不讓用戶再去觸發(fā)其他事件.

不讓用戶看到白屏, 看到白屏的體驗(yàn)差到爆炸啊.

各種炫酷的效果, 也是吸睛的一種手段.

一: loading需求分析

出現(xiàn)之時(shí), 要遮擋用戶的操作.

不依賴dom, 要通過js就能控制它的出現(xiàn)與隱藏, 比如配置axios.

充滿父級, 而不是充滿body, 因?yàn)槭莗c端, 所以不是小黑塊的形式.

屏幕上方進(jìn)度條的討論
我去年的工程里面用的進(jìn)度條, 體驗(yàn)太差了, 不夠顯眼, 屏幕上不能點(diǎn)擊讓人懵圈, 所以本次不用.

骨架屏的討論
????下一章會做(簡易版骨架屏).
很多技術(shù)方向, 是為了完美展示dom結(jié)構(gòu)的陰影, 1:1的還原還未加載出的dom的樣子, 其實(shí)我感覺不用這樣把.... 只是個(gè)過渡階段有個(gè)大致的樣子就可以了, 更多的精力與能力放在業(yè)務(wù)上, 據(jù)我觀察了很多app, 真的100%還原的真的不多, 而且我問過很多朋友是否注意到骨架屏與真實(shí)的dom結(jié)構(gòu)存在偏差, 全都說沒注意到, 所以骨架屏這方面本套組件只做最基本的功能.

二: 基礎(chǔ)結(jié)構(gòu)的搭建
模板

js

props: {
    title: {
      type: String,
      default: "加載中 . . ."
    },
    iconName: {  // 加載圖標(biāo)的樣子肯定是用戶自定義的
      type: String,
      default: "cc-load1" // 默認(rèn)就是普通的菊花
    },
    iconColor: { // 圖標(biāo)的顏色也是用戶自己定的, 萬一有特殊需求
      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){ // 文字與圖標(biāo)分的開一些
            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;
}

使用顯示

// 需要顯示的時(shí)候, 讓這個(gè)dom顯示即可, 因?yàn)槟J(rèn)是對瀏覽器定位的.

三: 針對父級定位, 而不是全局的loading
其實(shí)很簡單, 也就是屬性的差別, 把fixed定位換掉即可, 都可以換上吸附屬性浪一浪
讓我來加很多友好的屬性

js, 這里面的默認(rèn)值都是本套工程的共用值;

 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編程式調(diào)用

其實(shí)就算是蒙層狀態(tài), 也要給個(gè)點(diǎn)擊事件, 比如用戶點(diǎn)了很多下, 可以給用戶彈出一個(gè)"馬上好,再點(diǎn)受不了了...", 用戶可以自己通過native修飾符去做, 但是那樣太不工程化了.

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

別忘了加stop修飾符, 不然點(diǎn)擊穿透可就壞事了.

我們更多時(shí)候是要從js的方式控制加載狀態(tài)的
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也就是實(shí)例化這個(gè)組件
    let Constructor = Vue.extend(Loading);
    let node = new Constructor({
      propsData: options // 所有的配置也都如數(shù)傳進(jìn)去
    });
    // 執(zhí)行到他的鉤子
    node.vm = node.$mount();
    // 插入body, 因?yàn)檫@個(gè)就沒必要插入固定的父級了, 用戶自己傳也可以
    document.body.appendChild(node.$el);
  };
// 有出現(xiàn)就要有消失
  Vue.prototype.$ccHiddenLoading = function() {
   // 從body上面找到class為這個(gè)的元素就干掉.
    document.body.childNodes.forEach(item => {
      if (item.className === "cc-loading") {
        document.body.removeChild(item);
      }
    });
  };
};

export default Loading;

下一章: 簡易版骨架屏
歡迎大家一起進(jìn)步!

github: 鏈接描述
個(gè)人網(wǎng)站: 鏈接描述