vue 封一个提示框

根据传入参数为error或者success，显示警告框或者是成功提示框

component：

<template>
	<!-- 全局提示框 -->
	<div class="toast-box">
		<div  v-if="isSuccess" >
			<div  v-show="visible"   class="alert alert-success toast-alert">{{message}}</div>
		</div>
		<div  v-if="!isSuccess" >
			<div   v-show="visible"  class="alert alert-danger toast-alert">{{message}}</div>
		</div>
	</div>
</template>
<script type="text/javascript">
	export default{
		data(){
			return{
				message: "",
				visible: false,
				isSuccess:false
			}
		},
	}
</script>
<style type="text/css">
	.toast-box{
		position: fixed;z-index:99999;width:100%;
		top:50px; left:0px; text-align: center;
	}
	.toast-box .toast-alert{
		position: relative; display: inline-block; padding:10px 40px;
	}
</style>

js：

import ToastComponent from '@/pages/loginsingle/components/common/toast'
//引入组件

const Toast = {};
//设置全局的timer
let timer = null;

Toast.install = function (Vue){
	const ToastConstructor = Vue.extend(ToastComponent)
	const instance = new ToastConstructor();

	instance.$mount(document.createElement('div'))
	document.body.appendChild(instance.$el)

	Vue.prototype.$toast = (msg, duration,str) => {
		instance.message = msg;
		if(str == 'success'){
			instance.isSuccess = true;
		}else if(str == 'error'){
			instance.isSuccess = false
		}
		if(timer){
			clearTimeout(timer)
			timer = null;
		} 
		
		timer = setTimeout(function() {
			instance.visible = false;
		}, duration);
	}

}
export default Toast

main.js

Vue.use(Toast)

组件内调用:

this.$toast("请勿重复选择同一组合",3000,'error')

同理 loading动画亦如此：
component：

<template>
    <transition name="fade">
        <section v-if='doneLoad'>
            <div class="loading">
                <div class="d-flex justify-content-center">
                    <div class="spinner-border text-light" role="status">
                        <span class="sr-only">Loading...</span>
                    </div>
                </div>
            </div>
        </section>
    </transition>
</template>
<script>
export default {
	data(){
		return{
			doneLoad: false,
		}
	},
  props: {
    title: {
      doneLoad: false,
    }
  }
}
</script>
<style scoped lang="css">
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
section {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,.3);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.loading {
    width: 100%;
    text-align: center;
    /* flex-direction: column; */
}
.loading span{
    display: inline-block;
    width: 8px;
    height: 100%;
    border-radius: 4px;
    background: lightgreen;
    -webkit-animation: load 1s ease infinite;
    margin-left: 5px;
}
@-webkit-keyframes load{
    0%,100%{
        height: 40px;
        background: lightgreen;
    }
    50%{
        height: 70px;
        margin: -15px 0;
        background: lightblue;
    }
}
.loading span:nth-child(2){
    -webkit-animation-delay:0.2s;
}
.loading span:nth-child(3){
    -webkit-animation-delay:0.4s;
}
.loading span:nth-child(4){
    -webkit-animation-delay:0.6s;
}
.loading span:nth-child(5){
    -webkit-animation-delay:0.8s;
}
</style>

js:

import loading from '@/pages/loginsingle/components/common/loading'

const Loading = {};

Loading.install = function (Vue){
	const LoadingConstructor = Vue.extend(loading)
	const instance = new LoadingConstructor();

	instance.$mount(document.createElement('div'))
	document.body.appendChild(instance.$el)

	Vue.prototype.$loading = (doneLoad) => {
		instance.doneLoad = doneLoad;
	}

}

export default Loading;