实现一个简易版的Toast提示框

最新推荐文章于 2025-06-22 21:58:11 发布

原创最新推荐文章于 2025-06-22 21:58:11 发布 · 633 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Toast

Vue 专栏收录该内容

66 篇文章

订阅专栏

本文介绍了如何在 Vue 项目中创建和使用自定义 Toast 组件，包括模板、组件属性、样式和方法实现。通过实例展示了如何通过 `isShowToast` 和 `toastMessage` 控制显示和隐藏消息，并在登录成功时调用该功能。

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

1. 创建Toast组件

<template>
  <div class="toast">{{message}}</div>
</template>

<script>
export default {
  props:['message']

}
</script>

<style lang="less" scoped>
  .toast{
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    padding:10px;
    background: rgba(0, 0, 0, .35);
    border-radius: 5px;
    color: #fff;
  }

</style>>

2.引用

 <Toast v-if="isShowToast" :message = "toastMessage"/>
import Toast from '../../components/toast'
  data() {
    return {
      isShowToast:false,
      toastMessage: ''
    };
  },
method:{
    showToast(data){
       this.isShowToast = true;
        this.toastMessage=data
        setTimeout(()=>{
            this.isShowToast = false;
            this.toastMessage = ""
        },2000)
    },
}

3.使用