一:封装一个vue组件,并引入组件
Toast里的代码如下
<template>
<transition
enter-class
enter-active-class="animated fadeIn"
enter-to-class
leave-class
leave-active-class="animated fadeOut"
leave-to-class
>
<div class="toast" v-if="bln">{{text}}</div>
</transition>
</template>
<script>
export default {
data() {
return {
bln: false,
text: ""
};
},
//中央事件总线
created() {
this.$eventbus.$on(
"toast",
function(str) {
this.bln = !this.bln;
this.text = str;
setTimeout(() => {
this.bln = !this.bln;
}, 2500);
}.bind(this)
);
}
};
</script>
<style scoped>
.toast {
padding-top: 5px;
text-align: center;
150px;
height: 40px;
transform: translate(-50%, -50%);
position: fixed;
left: 50%;
top: 50%;
background: rgba(0, 0, 0, 0.7);
color: white;
border-radius: 5px;
z-index: 999999999999;
}
</style>
二:可在app.vue里用import引入组件
三:在main.js里写以下代码
import "./assets/style/animate.min.css"//注释:transition动画效果用到,需引入,对应目录下要有animate.min.css文件
Vue.prototype.$eventbus = new Vue();
Vue.prototype.$toast=function(str){//注释:挂在到vue原型上
this.$eventbus.$emit("toast",str)
};