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;
        }, );

      }

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

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