基於vue的toast組件（提示框），toast組件，可直接用

用法：

this.toast('保存成功')

html部分：

<div class="toast" v-show="toastShow">
  {{toastText}}
</div>

 js部分：

data （） {
    return {
        toastShow: false,
        toastText: ''
    }
},
methods: {
  toast (e) {
    let self = this
    sel.toastText = e
    sel.toastShow = true
    setTimeout(function(){
      sel.toastShow = false
    }, 1500)
  }
}

CSS部分：

  .toast{
    position: fixed;
    z-index: 2000;
    left: 50%;
    top:45%;
    transition:all .5s;
    -webkit-transform: translateX(-50%) translateY(-50%);
       -moz-transform: translateX(-50%) translateY(-50%);
        -ms-transform: translateX(-50%) translateY(-50%);
         -o-transform: translateX(-50%) translateY(-50%);
            transform: translateX(-50%) translateY(-50%);
    text-align: center;
    border-radius: 5px;
    color:#FFF;
    background: rgba(17, 17, 17, 0.7);
    height: 45px;
    line-height: 45px;
    padding: 0 15px;
    max-width: 150px;
  }

 

 

非原創，原文地址：https://blog.csdn.net/qq_39258914/article/details/81631715