基于vue的toast组件（提示框），toast组件，可以直接用

最新推荐文章于 2025-03-09 19:29:33 发布

qq_39258914

最新推荐文章于 2025-03-09 19:29:33 发布

阅读量1.7w

点赞数 4

分类专栏：前端 vue js功能文章标签： toast vue toast组件自定义提示框

本文链接：https://blog.csdn.net/qq_39258914/article/details/81631715

版权

前端同时被 3 个专栏收录

11 篇文章

订阅专栏

vue

8 篇文章

订阅专栏

js功能

5 篇文章

订阅专栏

本文介绍了一种支付宝红包分享的方式，并详细展示了如何使用前端技术实现简单的消息提示功能，包括HTML、CSS和JavaScript的配合使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

效果：

用法：

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