vue的toast组件（提示框）

最新推荐文章于 2024-08-24 08:43:02 发布

allen_csdns

最新推荐文章于 2024-08-24 08:43:02 发布

阅读量1.1k

点赞数

文章标签： vue的toast组件（提示框）

本文链接：https://blog.csdn.net/allen_csdns/article/details/103118692

版权

本文介绍了如何在Vue.js中创建一个Toast组件，包括HTML结构、JavaScript逻辑和CSS样式，帮助开发者实现在前端应用中展示提示信息的功能。

摘要由CSDN通过智能技术生成

在这里插入图片描述
公众号：前端基础教程从0开始

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

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%) tra