欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

基于Vue 實(shí)現(xiàn)一個(gè)中規(guī)中矩loading組件

 更新時(shí)間:2019年04月03日 11:28:45   作者:crper  
這篇文章主要介紹了基于Vue 實(shí)現(xiàn)一個(gè)中規(guī)中矩loading組件,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

前言

最近有一個(gè)新的項(xiàng)目,UI大佬不知道從哪里找來(lái)了一張GIF丟到藍(lán)湖,說(shuō)作為全局的頁(yè)面loading ,但是自己想了想,還是選擇畫(huà)一個(gè)。

一開(kāi)始想過(guò)用svg,canvas;最終還是選擇了css3+js來(lái)實(shí)現(xiàn)這個(gè)效果;

gif的缺點(diǎn)挺多,至于為什么又排除了svg和canvas;

是因?yàn)閏ss3+js可控性更強(qiáng),不管是大小還是顏色,還是響應(yīng)式(我的項(xiàng)目走的vh,vw)那套來(lái)適配;

可以借助打包插件,達(dá)到loading的大小適配;

效果

UI大佬提供的GIF

實(shí)現(xiàn)的效果【在線codesandbox預(yù)覽


  • 支持環(huán)的顏色改變及整個(gè)展示大小
  • 支持在loading底部顯示文字并控制其樣式

實(shí)現(xiàn)思路

這個(gè)東東主要用了這么幾個(gè)要點(diǎn)來(lái)實(shí)現(xiàn)完整的效果;

  • flex和position來(lái)布局
  • 偽類(lèi)的顏色繼承(currentColor)
  • 邊框結(jié)合圓角實(shí)現(xiàn)環(huán)
  • 用了transform和animation來(lái)實(shí)現(xiàn)了整個(gè)過(guò)渡

效果知道怎么實(shí)現(xiàn)了,剩下的就是我們需要實(shí)現(xiàn)的功能點(diǎn)了;

因?yàn)槭敲嫦蛞苿?dòng)端的,所以這些常規(guī)的東東也要考慮下

  • 遮罩層可控
  • 防止點(diǎn)擊穿透滾動(dòng)body
  • 組件支持函數(shù)方法調(diào)用

源碼

Loading.vue

<template>
 <div id="loading-wrapper">
 <div class="loading-ring" :style="ringStyle">
  <div class="outer" />
  <div class="middle" />
  <div class="inner" />
 </div>
 <div class="text" :style="textStyle" v-if="text">
  {{ text }}
 </div>
 </div>
</template>

<script>
export default {
 name: "Loading",
 props: {
 text: {
  type: String,
  default: ""
 },
 textStyle: {
  type: Object,
  default: function() {
  return {
   fontSize: "14px",
   color: "#fff"
  };
  }
 },
 ringStyle: {
  type: Object,
  default: function() {
  return {
   width: "100px",
   height: "100px",
   color: "#407af3"
  };
  }
 }
 },
 methods: {
 preventDefault(e) {
  // 禁止body的滾動(dòng)
  console.log(e);
  e.preventDefault();
  e.stopPropagation();
 }
 },
 mounted() {
 document
  .querySelector("body")
  .addEventListener("touchmove", this.preventDefault);
 },
 destroyed() {
 document
  .querySelector("body")
  .removeEventListener("touchmove", this.preventDefault);
 }
};
</script>

<style lang="scss" scoped>
#loading-wrapper {
 position: fixed;
 left: 0;
 top: 0;
 height: 100vh;
 width: 100vw;
 background-color: rgba(0, 0, 0, 0.25);
 display: flex;
 justify-content: center;
 align-items: center;
 flex-direction: column;
 .loading-ring {
 position: relative;
 width: 200px;
 height: 200px;
 .outer,
 .inner,
 .middle {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: currentColor;
  &::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  border-left: 10px solid currentColor;
  border-right: 10px solid currentColor;
  border-top: 10px solid currentColor;
  border-bottom: 10px solid transparent;
  }
 }

 .outer {
  width: 100%;
  height: 100%;
  &::after {
  animation: anticlockwise 1.5s infinite linear;
  }
 }
 .inner {
  width: calc(100% * 0.6);
  height: calc(100% * 0.6);
  &::after {
  animation: anticlockwise 1.5s infinite linear;
  }
 }
 .middle {
  width: calc(100% * 0.8);
  height: calc(100% * 0.8);
  &::after {
  animation: clockwise 1.5s infinite linear;
  }
 }
 }

 .text {
 color: #fff;
 font-size: 14px;
 padding: 30px;
 width: 250px;
 text-align: center;
 }
}

@keyframes clockwise {
 0% {
 transform: rotate(0deg);
 }
 100% {
 transform: rotate(360deg);
 }
}
@keyframes anticlockwise {
 0% {
 transform: rotate(0deg);
 }
 100% {
 transform: rotate(-360deg);
 }
}
</style>

index.js

import Loading from "./Loading.vue";
// 來(lái)保持實(shí)例,單例模式
let instance;
let el;

Loading.install = function(Vue, options = {}) {
 const defaultOptions = {
 text: "",
 textStyle: {
  fontSize: "14px",
  color: "#fff"
 },
 ringStyle: {
  width: "100px",
  height: "100px",
  color: "#407af3"
 },
 ...options
 };
 Vue.prototype.$loading = {
 show(options = {}) {
  if (!instance) {
  let LoadingInstance = Vue.extend(Loading);
  el = document.createElement("div");
  document.body.appendChild(el);
  instance = new LoadingInstance({
   propsData: { defaultOptions, ...options }
  }).$mount(el);
  } else {
  return instance;
  }
 },
 hide() {
  if (instance) {
  document.body.removeChild(document.getElementById("loading-wrapper"));
  instance = undefined;
  }
 }
 };
};

export default Loading;

選項(xiàng)及用法

選項(xiàng)

 text: { // 這個(gè)不為空就在loading下面顯示文字
  type: String,
  default: ""
 },
 textStyle: { // loading text 的樣式,顏色及字體大小
  type: Object,
  default: function() {
  return {
   fontSize: "14px",
   color: "#fff"
  };
  }
 },
 ringStyle: { // 最外環(huán)的大小,內(nèi)二環(huán)是比例換算的(百分比)
  type: Object,
  default: function() {
  return {
   width: "100px",
   height: "100px",
   color: "#407af3"
  };
  }
 }

用法

在主入口use一下便可全局使用

除了常規(guī)的引入使用,還支持函數(shù)調(diào)用,掛載了一個(gè)$loading。

this.$loading.show({
  text: "loading",
  textStyle: {
   fontSize: "18px",
   color: "#f00"
  }
  });
  
let st = setTimeout(() => {
  clearTimeout(st);
  this.$loading.hide();
 }, 1000);

總結(jié)

props的傳遞沒(méi)有做增量合并(遞歸每個(gè)key賦值),直接淺復(fù)制合并的對(duì)于組件功能的概而全,拓展性,大小需要自己權(quán)衡;

到這里,我們業(yè)務(wù)需要的一個(gè)小組件,該有的功能都有了。

以上所述是小編給大家介紹的基于Vue 實(shí)現(xiàn)一個(gè)中規(guī)中矩loading組件,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!

相關(guān)文章

  • Vue中如何把hash模式改為history模式

    Vue中如何把hash模式改為history模式

    這篇文章主要介紹了Vue中如何把hash模式改為history模式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-07-07
  • vscode中使用vue的一些插件總結(jié)(方便開(kāi)發(fā))

    vscode中使用vue的一些插件總結(jié)(方便開(kāi)發(fā))

    對(duì)于很多使用vscode編寫(xiě)vue項(xiàng)目的新手同學(xué)來(lái)說(shuō),可能不知道使用什么插件,下面這篇文章主要給大家介紹了關(guān)于vscode中使用vue的一些插件,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下
    2022-11-11
  • 深入理解vue中的scoped屬性

    深入理解vue中的scoped屬性

    vue中的 scoped 屬性,其實(shí)就是給每一個(gè)dom節(jié)點(diǎn)元素都添加了不重復(fù)的自定義屬性(如:data-v-6810cbe5),本文給大家介紹vue中的scoped屬性相關(guān)知識(shí),感興趣的朋友一起看看吧
    2023-12-12
  • vue實(shí)現(xiàn)驗(yàn)證碼倒計(jì)時(shí)按鈕

    vue實(shí)現(xiàn)驗(yàn)證碼倒計(jì)時(shí)按鈕

    這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)驗(yàn)證碼倒計(jì)時(shí)按鈕,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-08-08
  • Vue生命周期實(shí)例分析總結(jié)

    Vue生命周期實(shí)例分析總結(jié)

    Vue的生命周期就是vue實(shí)例從創(chuàng)建到銷(xiāo)毀的全過(guò)程,也就是new Vue()開(kāi)始就是vue生命周期的開(kāi)始。Vue實(shí)例有?個(gè)完整的?命周期,也就是從開(kāi)始創(chuàng)建、初始化數(shù)據(jù)、編譯模版、掛載Dom->渲染、更新->渲染、卸載等?系列過(guò)程,稱(chēng)這是Vue的?命周期
    2022-10-10
  • Vue?Echarts實(shí)現(xiàn)帶滾動(dòng)效果的柱形圖

    Vue?Echarts實(shí)現(xiàn)帶滾動(dòng)效果的柱形圖

    這篇文章主要為大家詳細(xì)介紹了Vue?Echarts實(shí)現(xiàn)帶滾動(dòng)效果的柱形圖,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-04-04
  • vue如何重置data的所有屬性

    vue如何重置data的所有屬性

    這篇文章主要介紹了vue如何重置data的所有屬性,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • vue項(xiàng)目中js文件使用vue的this實(shí)例說(shuō)明

    vue項(xiàng)目中js文件使用vue的this實(shí)例說(shuō)明

    這篇文章主要介紹了vue項(xiàng)目中js文件使用vue的this實(shí)例說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-12-12
  • elementUI?checkBox報(bào)錯(cuò)Cannot read property 'length' of undefined解決

    elementUI?checkBox報(bào)錯(cuò)Cannot read property &ap

    這篇文章主要為大家介紹了elementUI?checkBox報(bào)錯(cuò)Cannot read property 'length' of undefined的解決分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-06-06
  • element?tooltip的使用

    element?tooltip的使用

    本文主要介紹了element?tooltip的使用,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2023-02-02

最新評(píng)論