在项目中运用了toast组件，自己写了一个，但是在调用的过程中发现多次调用时只展示第一次的bug，特在此记录
组件：
"'
<template lang="html">
<div v-show="visible">
<div class="dj-toast" :style="width">
<div class="dj-toast-con" v-if="type === 'normal'">
<p>{{msg}}</p>
</div>
<div class="dj-toast-con" v-if="type === 'suc'">
<span class="dj-toast-icon dj-toast-icon-ok"></span>
<p>{{msg}}</p>
</div>
<div class="dj-toast-con" v-if="type === 'err'">
<span class="dj-toast-icon dj-toast-icon-err"></span>
<p>{{msg}}</p>
</div>
<div class="dj-toast-con" v-if="type === 'load'">
<div class="dj-toast-icon1 dj-toast-icon-load">
<div class='dj-toast-icon-circle'></div>
</div>
<p>{{msg}}</p>
</div>
</div>
</div>
</template>
<script>
/**
-
type: normal, suc, err
*/
export default {
name: "Toast",
props: {
msg: {
type: String,
default: "hello world"
},
type: {
type: String,
default: "normal"
},
time: {
type: String
},
value: {
type: Boolean,
default: 'false'
}
},
data() {
return {isShow: true,
visible: this.value};
},
watch: {
value (val) {
this.visible = val
},
visible () {
if (this.visible) {
window.setTimeout(() => {
if (this.visible) {
this.visible = false;
this.emit('input', false); this.emit('function1');
}
}, this.time)
}
}
},
computed: {
width() {
if (this.msg && this.msg.length > 6) {
this.twidth = 195;
return "width: 195px";
} else {
return "width: 130px";
}
}
},
methods: {
}
};
</script>
<style lang="scss" scoped>
.dj-toast {
position: fixed;
top: 50%;
left: 50%;
color: #fff;
transform: translate(-50%, -50%);
z-index: 1000;
}
@-webkit-keyframes scaleUp {
0% {
transform: scale3d(0.6, 0.6, 1);
}
100% {
transform: scale3d(1, 1, 1);
}
}
@keyframes scaleUp {
0% {
transform: scale3d(0.6, 0.6, 1);
opacity: 0;
}
100% {
transform: scale3d(1, 1, 1);
opacity: 1;
}
}
@-webkit-keyframes scaleShock {
0% {
transform: scale3d(0.4, 0.4, 1);
}
60% {
transform: scale3d(1.07, 1.07, 1);
}
80% {
transform: scale3d(0.97, 0.97, 1);
}
100% {
transform: scale3d(1, 1, 1);
}
}
@keyframes scaleShock {
0% {
transform: scale3d(0.4, 0.4, 1);
}
60% {
transform: scale3d(1.07, 1.07, 1);
}
80% {
transform: scale3d(0.97, 0.97, 1);
}
100% {
transform: scale3d(1, 1, 1);
}
}
@keyframes load {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@-webkit-keyframes load {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
.dj-toast-con {
font-size: 15px;
line-height: 15px;
padding: 12px;
text-align: center;
background: rgba(0, 0, 0, 0.75);
border-radius: 2px;
animation: scaleUp 0.1s;
p {
font-size: 15px;
line-height: 25px;
white-space: wrap;
overflow: hidden;
margin-top: 8px;
margin-bottom: 0;
&:nth-of-type(1) {
margin-top: 0;
}
}
.dj-toast-icon1 {
width: 23px;
height: 23px;
display: inline-block;
margin-top: 7px;
margin-left: 7px;
margin-bottom: 3px;
animation: scaleShock 0.4s;
text-align: center;
}
.dj-toast-icon {
width: 25px;
height: 25px;
display: inline-block;
margin-top: 3px;
margin-bottom: 6px;
animation: scaleShock 0.4s;
text-align: center;
}
.dj-toast-icon-circle {
background-image: url("data:image/png;base64,");
background-size: 23px 23px;
width: 23px;
height: 23px;
position: absolute;
left: -6px;
top: -5px;
animation: load 1s linear infinite;
-webkit-animation: load 1s linear infinite;
}
.dj-toast-icon-load {
background-image: url("data:image/png;base64,);
background-size: 12px 12px;
margin-right: 7px;
float: left;
position: relative;
width: 12px;
height: 12px;
// animation: none;
}
.dj-toast-icon-ok {
background-image: url("data:image/png;);
background-size: 100% 100%;
}
.dj-toast-icon-err {
background-image: url("data:image/png;base64,);
background-size: 100% 100%;
}
}
</style>
"'
在文件中引用
"'
<Toast v-model='isToastShow' :time="time" :msg="msg" :type="type" ></Toast>
"'
即可
