对你有帮助的话就帮我扫一下支付宝红包呗,不要的扫给我也可以,谢谢了各位,有啥需要可以在下方留言,多金大佬也可以打赏些小费。

效果:

用法:

this.toast('保存成功')

 

html部分:

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

 js部分:

data () {
    return {
        toastShow: false,
        toastText: ''
    }
},
methods: {
  toast (str) {
    let v = this
    v.toastText = str
    v.toastShow = true
    setTimeout(function(){
      v.toastShow = false
    }, 1500)
  }
}

style部分:

.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;
        }

 

Logo

前往低代码交流专区

更多推荐