写一个简单的vue loading插件

写一个简单的vue loading插件。集成message功能：

 

目录：

plugins

  ---loading

     --loading.vue   //插件的样式和基本方法

    ---index.js        //插件的逻辑

    ---type.js          //用来区分 loading，warning，error，success等类型的一个render函数

----------------------------------------------------------------------------------------------------------------

loading.vue

<template>

  <transition name="slide">

    <div

      v-if="show"

      class="sloading loading-box fx p16 boxSize w"

    >

      <div class="icon-box">

        <Icon

          :type="type"

          :text="text"

        ></Icon>

      </div>

      <div class="cont-box fs12 f333">{{ text }}</div>

    </div>

  </transition>

</template>

<script>

import Icon from "./type.js";

export default {

  components: { Icon },

  data() {

    return {

      icon: require("@/assets/logo.png"),

      show: false,

      type: "loading",

      text: "数据加载中请稍后",

      progressColor: "#ff0000",

      color: "#ffa800",

    };

  },

};

</script>

<style>

.loading-box {

  min-width: 260px;

  position: fixed;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  box-shadow: 0 0 10px 1px #ccc;

  z-index: 2020;

}

.icon-box {

  flex: 0 1 70px;

  text-align: center;

  font-size: 18px;

}

.cont-box {

  flex: 1;

}

.rotate {

  animation: ani 1s ease-in infinite;

}

@keyframes ani {

  0% {

    -webkit-transform: rotate(0deg);

  }

  100% {

    -webkit-transform: rotate(360deg);

  }

}

.slide-enter-active,

.slide-leave-active {

  transition: all 0.5s;

  top: 50%;

  opacity: 1;

}

.slide-enter,

.slide-leave-active {

  opacity: 0;

}

.icon-loading {

  font-weight: bold;

}

.default {

  color: #ffa800;

}

.error {

  color: #f00;

}

.warning {

  color: #ffa800;

}

.success {

  color: #3ac24b;

}

</style>

----------------------------------------------------------------------------------------------------------------

index.js

 

import myLoading from "./loading.vue";

export default {

  install(Vue, options) {

    const Loading = Vue.extend(myLoading);

    const Profile = new Loading({

      el: document.createElement("div"),

    });

    document.body.appendChild(Profile.$el);

    if (options) {

      if (options.txt) {

        Profile.icon = options.txt;

      }

      if (options.color) {

        Profile.color = options.color;

      }

      if (options.type) {

        Profile.type = options.type;

      }

      options.mask = options.mask ? options.mask : false

    }

    const myLoadingMethod = {

      open(

        opts = { type: "loading", text: "加载中请稍后", duration: 2000, mask: true }

      ) {

        console.log("open:", opts.duration);

        let loadEle = document.querySelector(".sloading");

        Profile.show = true;

        console.log("Profile.show:", Profile.show);

        if (opts.text) {

          Profile.text = opts.text;

        }

        // if (opts.color) {

        //   Profile.color = opts.color;

        // }

        if (opts.type) {

          Profile.type = opts.type;

        }

        if (opts.duration) {

          Profile.duration = opts.duration;

          if (opts.duration !== 0) {

            setTimeout(() => {

              Profile.show = false;

            }, opts.duration);

          }

        }

        if (!opts.duration) {

          setTimeout(() => {

            Profile.show = false;

          }, 2000);

        }

 

      },

      close() {

        Profile.show = false;

      },

    };

    Vue.prototype.$sLoading = myLoadingMethod;

  },

};

----------------------------------------------------------------------------------------------------------------

type.js

export default {

    render(h) {

        return h("i", {

            attrs: {

                class: 'iconfont inBlock center'

            },

            'class': {

                'iconfont icon-loading rotate inBlock default': this.type == "loading",

                'iconfont icon-warning inBlock warning': this.type == "warning",

                'iconfont icon-error inBlock error': this.type == "error",

                'iconfont icon-success inBlock success': this.type == "success",

            }

        })

    },

    props: {

        type: {

            type: String,

            default: 'loading'

        },

        text: {

            type: String,

            default: '数据加载中请稍后'

        }

    }

}