vue中的Toast组件使用

在项目中运用了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>
"'
即可