vue版本，小Toast

<div id="message" :class="{'show':show_Message}"><p v-html="message_Text"></p></div>

message_Text:'',
show_Message:false,


//Toast
      message(message) {
        var timer;
        this.show_Message=true;
        this.message_Text=message;

        clearTimeout(timer);

        timer = setTimeout( ()=> {
             this.show_Message=false;
        }, 3000);

      }



      #message{
  width: 382px;
  bottom: 50%;
    border-radius: 1px;
    font-size: 36px;
    color: #fff;
    z-index: 99;
    box-shadow: 0 1px 14px rgba(0,0,0,.24);
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    text-align: center;
    border-radius: 6px;
}
#message.show {
    visibility: visible;
    opacity: 1;
}
#message {
    position: fixed;
    background: rgba(0,0,0,.6);
    left: 50%;
}
#msgTxt{
  line-height:1.55rem;
  height: 3.1rem;
}
.show {
    display: block!important;
}



message("6月15日活动才开始哦~");