根据传入参数为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;