1、效果图:
2、子组件的封装
<template>
<div class="toast" v-if="toastStatus">
<span class="desc">{
{tips}}</span>
</div>
</template>
<script>
export default {
name: "",
data() {
return {
timers: 3000,
toastStatus:false
};
},
props: {
timer: Number,
status: Boolean,
tips: String
},
watch:{
status(val){
this.toastStatus = val;
if(val){
this.changeStatus();
}
}
},
methods: {
changeStatus() {
let _this = this;
_this.timers = _this.timer;
setTimeout(function() {
_this.toastStatus = false;
_this.$emit('clearTimer',false);
}, _this.timers);
}
}
};
</script