VUE 全局loading，message组件封装

样式及逻辑自定，如下举例

loading：

loading.vue:

<template>
    <div  class="loading" id="vue-loading">
        <div class="loadEffect">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>
</template>

<script>
    export default {
        name: "loading",
    }
</script>

<style lang="stylus" scoped>
    @import "./loading.styl";
</style>

loading.js:

import LoadingComponents from './loading.vue';

let Loading = {};
Loading.installed = false;
Loading.install = (Vue) => {
    if (Loading.installed) return;
    Vue.prototype.$loading = {};
    Vue.prototype.$loading.show = () => {
        if (document.querySelector('#vue-loading')) return;
        let LoadingTip = Vue.extend(LoadingComponents);
        let tpl = new LoadingTip().$mount().$el;
        document.body.appendChild(tpl);
        document.querySelector('#vue-loading').addEventListener('touchmove', function (e) {
            e.stopPropagation()
            e.preventDefault()
        });
        Loading.installed = true;
    }
    Vue.prototype.$loading.hide = () => {
        let tpl = document.querySelector('#vue-loading');
        if(tpl) document.body.removeChild(tpl);
    }
}

export default Loading;

loading.styl:

.loading
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  text-align: center;
  box-sizing: border-box;
  padding: 400px 0 0 0;
  background: rgba(255, 255, 255, 0.6);
  z-index: 1000;
  display: block;
.loadEffect
  width:200px;
  height:200px;
  position:relative;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 0;

.loadEffect span
  display:inline-block;
  width:20px;
  height:20px;
  border-radius:50%;
  background: #089eff;
  position:absolute;
  -webkit-animation:load 1.04s ease infinite;
@-webkit-keyframes load
  0%
    opacity:1;
  100%
    opacity:0.2;
.loadEffect span:nth-child(1)
  left:0;
  top:50%;
  margin-top:-15px;
  -webkit-animation-delay:0.13s;
.loadEffect span:nth-child(2)
  left:25px;
  top: 25px;
  -webkit-animation-delay:0.26s;
.loadEffect span:nth-child(3)
  left:50%;
  top:0px;
  margin-left:-15px;
  -webkit-animation-delay:0.39s;
.loadEffect span:nth-child(4)
  top:25px;
  right:25px;
  -webkit-animation-delay:0.52s;
.loadEffect span:nth-child(5)
  right:0;
  top:50%;
  margin-top:-15px;
  -webkit-animation-delay:0.65s;
.loadEffect span:nth-child(6)
  right:25px;
  bottom:25px;
  -webkit-animation-delay:0.78s;
.loadEffect span:nth-child(7)
  bottom:0;
  left:50%;
  margin-left:-15px;
  -webkit-animation-delay:0.91s;
.loadEffect span:nth-child(8)
  bottom:25px;
  left:25px;
  -webkit-animation-delay:1.04s;

main.js:

import Loading from '@/components/loading/loading';


Vue.use(Loading);

 

 

message：alert：

alert.js:

import Alert from './alert.vue'
import Vue from 'vue'
let AlertConstructor = Vue.extend(Alert)
let instance,
    seed = 1,
    index = 2000;
const install = () => {
    Object.defineProperty(Vue.prototype, '$alert', {
        get () {
            let id = 'message_' + seed++
            const alertMsg = options => {
                instance = new AlertConstructor({
                    propsData: options
                })
                index++;
                instance.id = id;
                instance.vm = instance.$mount();
                document.body.appendChild(instance.vm.$el);
                instance.vm.$el.style.zIndex = index;
                return instance.vm;
            }
            return alertMsg
        }
    })
}
export default install

alert.styl:

.info
  position: fixed;
  top: 100px;
  min-height: 70px;
  height: auto;
  white-space: normal;
  word-break: break-all;
  box-sizing: border-box;
  padding: 0 30px;
  width: 500px;
  left: 50%;
  z-index: 9999;
  border: 1px solid #ebeef5;
  background: #edf2fc;
  color: #909399;
  line-height: 70px;
  border-radius: 15px;
  margin-left: -250px;
  transition: all .5s;
  font-size: 26px;
  text-align: left;
  &.success
    border: 1px solid #e1f3d8;
    background: #f0f9eb;
    color: #67c23a;
  &.error
    border: 1px solid #fde2e2;
    background: #fef0f0;
    color: #f56c6c;
  &.warning
    border: 1px solid #faecd8;
    background: #fdf6ec;
    color: #e6a23c;

alert.vue:

<template>
    <div
        class="info"
        :style="{top:`${top}px`}"
        :class="{'success':type === 'success','error': type === 'error','warning': type === 'warning'}"
        v-if="isShow"
    >
        {{msg}}
    </div>
</template>
<script>
    export default {
        /**
         * 参考: Vue : https://cn.vuejs.org/v2/guide/components.html
         * @param {string|number} msg 弹框内容
         * @param {String} type 弹出框类型  可选值有：'success'、'warning'、'info'、'error' 默认值为 'info'
         * @param {Number} time 弹出框关闭时间  以秒为单位 默认值为 2S
         * @param {String} top 弹出框高度 字符串类型数值  默认值为 '100'
         */
        props: {
            msg: {
                type: [String, Number],
                default: ''
            },
            type: {
                type: String,
                default: ''
            },
            time:{
                type: Number,
                default: 2,
            },
            top:{
                type: String,
                default: '100',
            }
        },
        mounted() {
            setTimeout(()=>this.msg = '',this.time*1000);
        },
        methods: {
        },
        computed: {
            isShow () {
                return Boolean(this.msg);
            }
        },
    }
</script>
<style lang="stylus" scoped>
    @import "./alert.styl"
</style>

main.js:

import Alert from '@/components/message/alert';


Vue.use(Alert);

使用方法：

外部插件内使用：
import Vue from 'vue';
const _ = new Vue();

_.$loading.show();
_.$loading.hide();


_.$alert({msg: '提示信息', type: "error"});




vue文件内使用：

this.$loading.show();
this.$loading.hide();

this.$alert({msg: '提示信息', type: "error"});